search

unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
4.59k stars 267 forks source link

CSS Variables Not Working Inside Shadow DOM with shadcn-vue Plugin and TailwindCSS #757

Closed SAntoineS closed 3 weeks ago

SAntoineS commented 3 weeks ago

Hey,

I started a project about a vue custom web component using this plugin.

I followed the install config for shadcn-vue x Vite here.

But I have a problem with the CSS. The plugin I'm using work with shadowDOM (I can disable but I need it for my project).

When I disable the shadowDOM I can use the CSS var contained in my index.css.

And when I enable the shadowDOM there no more CSS Var (no --primary, etc). I'm new using shadowDOM maybe I just can't stock CSS Var in a shadow DOM, I don't know.

There is a stackblitz demo.

Anyone can help about this ??

Thanks !

SAntoineS commented 3 weeks ago

Just replaced :root by :host in index.css