search

EranGrin / vue-web-component-wrapper

vue3 - web component wrapper plugin
https://erangrin.github.io/vue-web-component-wrapper/
59 stars 7 forks source link

Global variable declaration using `:root` #32

Closed khrise closed 6 days ago

khrise commented 4 months ago

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?

EranGrin commented 4 months ago

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?

khrise commented 4 months ago

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

EranGrin commented 4 months ago

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

khrise commented 4 months ago

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.

EranGrin commented 4 months ago

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

EranGrin commented 1 month ago

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

EranGrin commented 1 month ago

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

khrise commented 1 month ago

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

EranGrin commented 1 week ago

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

khrise commented 6 days ago

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