Light DOM styles "leaking" into Polymer component's shadow DOM

Question

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?

Can you please add the code of the whole element and the HTML how you use it and add contentvto it? — Günter Zöchbauer

Abhinav Abhinav · Accepted Answer · 2016-02-05T15:56:35

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>

Light DOM styles "leaking" into Polymer component's shadow DOM

1 Answers