search

EranGrin / vue-web-component-wrapper

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

Shadow DOM only #19

Closed lbineau closed 2 months ago

lbineau commented 2 months ago

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.

EranGrin commented 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

lbineau commented 2 months ago

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.

EranGrin commented 2 months ago

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

lbineau commented 2 months ago

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...

EranGrin commented 2 months ago

I am not sure if you are aware of this, but CSS custom properties (variables) can penetrate the Shadow DOM

lbineau commented 2 months ago

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.

EranGrin commented 2 months ago

@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

haydenbbickerton commented 2 months ago

@EranGrin Fantastic! What was the fix for you? Just a general description of it would be great

EranGrin commented 2 months ago

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

firescript commented 2 months ago

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