search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

external styles have influence on widget - in spite of shadow DOM #244

Closed mhubertm closed 3 years ago

mhubertm commented 3 years ago

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

karol-f commented 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.

https://stackoverflow.com/a/49709787/1616437