Light DOM styles “leaking” into Polymer component's shadow DOM

问题

I have a polymer web component which has a div named content, within the component.

I have noticed that if the host page has a style for div.content then it applies that style to my component!

This is an unexpected turn of events since web components are supposed to prevent light DOM styling from leaking into the component. In addition, I am using the following css rule which is supposed to prevent such a thing from happening:

:host {
   all: initial;
 }

Any ideas?

回答1:

Polymer by default doesn't use shadow-dom. It uses an approximation of it called shady dom, which doesn't provide style encapsulation and everything is dumped into light dom.

If you want to enable shadow dom by default, you can do so by using this config:

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

来源：https://stackoverflow.com/questions/35216510/light-dom-styles-leaking-into-polymer-components-shadow-dom