Closed mhubertm closed 3 years ago
Why is this happening? CSS selectors in Light DOM are prevented from reaching elements inside shadow DOM. But when a CSS property has the > value inherit, which is the default value of color, the shadow DOM will still inherit those from the light DOM.
I've noticed that external style implemented in parent view like (index) which will be rendering our widget (custom-element) have influence on styles inside shadow DOM.
I set styles in public/index.html `
And then run my widget which should be isolated - but elements inside have the same color. Any advices?
Whats more... when I set some styles inside custom-element those changes are applied to parent not for current element. It should have been isolated too, isn't it?
Here is example in codesanbox: https://codesandbox.io/s/vue-custom-element-with-external-library-e35z6