vue-web-component-wrapper Global variable declaration using `:root`

In this post, you introduced a mechanism to replace all occurrences of :root with :host.

The Element plus lib uses CSS var and sets it to :root which the shadow DOM doesn't have access to as they are exposed to the global scope only, this might be the issue with other libs or frameworks that use CSS var as well. Therefore, I added a bugfix to replace all :root with :host which should solve the issue for all such use cases.

You removed this feature later on with the comment Rollback changes with :root replacement as most use cases are for css variables and this does work web components . Could you elaborate on that, please? In my web components, I use a component library (telekom-scale), which provides css-variables in :root-manner. I cannot access any of these variables in my web components when using vue-web-component-wrapper. If I monkey-patch the variable declaration from :root to :host, it works. So, I would really like this feature back. Or am I missing something?

Jul 15 '24 14:07 khrise

Hi @khrise,

This was a misinterpretation of the problem, as css vars in :root can penetrate the shadow DOM you can review this example. https://stackblitz.com/edit/stackblitz-starters-mynw5x?file=index.html

I if you can share an example, I can review your issue?

Jul 18 '24 07:07 EranGrin

Thanks for your reply. Yes, if a variable is declared in the containing website, it's available in the shadow dom. However, a web component in a shadow dom seems not to be allowed to define things for the :root scope. I modified your stackblitz to reflect my situation. Note the :root declaration is in the web component.

https://stackblitz.com/edit/stackblitz-starters-h9dgpl?file=index.html

Jul 18 '24 07:07 khrise

This is true, but the question is why not to keep :root outside the web-component

Jul 18 '24 09:07 EranGrin

Because I can't. In my case, the whole point of exposing a web component is to be able to embed it into an arbitrary website, like a widget. I don't control the surrounding website. Neither do I want to require the surrounding website to load an additional stylesheet in its root. I want (and need) the web component to be completely self-contained.

Jul 18 '24 09:07 khrise

Alrighty I'll add a dedicated feature for this use case

Jul 18 '24 11:07 EranGrin

Finally, I could take some time to add this feature, users now have the option to replace the injected CSS :root to :host

you can see this example. https://stackblitz.com/~/github.com/EranGrin/bootstrap-demo-webcomponent?file=package.json

Oct 14 '24 08:10 EranGrin

Hi @khrise I would like to close this issue, let me know if you have any thoughts

Oct 17 '24 06:10 EranGrin

That's great news, thanks! I'm on vacation right now, I won't be able to check this out until next week. Cheers

Oct 17 '24 06:10 khrise

Hi @khrise just flowing up on this, did you have a chance to check this, can we close the issue?

Nov 13 '24 08:11 EranGrin

Sorry it took so long to respond. I checked the new flag and it works like a charm! Thanks a lot for your effort!

Nov 16 '24 08:11 khrise