Closed lbineau closed 2 months ago
Hi There, This isn't the first time I've come across this question, but I'm always curious, considering shadowDOM is one of the main features of web component encapsulation. With that being said, I can add this feature, but it does feel like it's missing the entire point of web component usage.
I would be glad if someone could convince me otherwise
Hello @EranGrin,
Thanks for replying so fast. It is an issue that I'm not the only one to have in my research: https://github.com/vuejs/core/issues/4314#issuecomment-1021393430 / https://github.com/vuejs/core/pull/4404
So basically we use Vue in a monolith website. Most of the HTML is rendered by the backend and we use Vue to enhance the interactivity of the website.
The main issue is Vue always needs a root node for building an application. The workaround is to encapsulate the component as a WebComponent.
We have a common styling for the whole company (i.e. a CSS stylesheet coming through a CDN)
Imagine you have a .button
definition in this stylesheet, you cannot share the definition of a <button>
between a Vue component and the static content as the styles are isolated due to shadowDOM.
I had a look at the vue core code, it might be possible to override the attach shadow dom, but I'm not sure what will be the entire implications. I can work on this next week, till then I'm on holiday
The main issue I've read so far is the impossibility of using slot
because it is part of the shadowDOM API.
That I would need to have in my use-case unfortunately...
I am not sure if you are aware of this, but CSS custom properties (variables) can penetrate the Shadow DOM
Yes I know, I'm refering to global CSS. The goal being not to have to rewrite all styles for the default button / headings / etc. But maybe I'm taking the problem the wrong way.
@lbineau good news. I found a way to resolve the problem. It might take me a few days more to pack it and make some clean-ups. I spent a lot of time on this today, and I have to do some work that makes money as well. The main issue was with the slots, as you mentioned before, this was painful to solve
@EranGrin Fantastic! What was the fix for you? Just a general description of it would be great
New Release 1.5.0 is live 🔥
Here is the demo of web component without shadow dom
https://stackblitz.com/~/github.com/EranGrin/web-component-no-shadow-dom-demo
First of all nice work @EranGrin, I checked your demo very cool! Would your Shadow Dom logic apply to this PR? https://github.com/vuejs/core/pull/4404 - that would be a big win for the "reactivity sprinkling" use case that @lbineau described.
I admit I am in scenario where I'm building a Wordpress Theme and want to inject vue logic for certain e-commerce scenarios, and have had to create a process to bundle "web component" styles and import that specific stylesheet into the
Hello @EranGrin,
Thank you for creating this library. I think the main issue with Vue 3 WebComponents is their lack of support for normal DOM and just support of shadow DOM. It creates some issues with styling scopes, ex: not possible to use an external CSS stylesheet. Does your library support both?
Best regards.