External style is bleeding into my Polymer component's local DOM

Question

In my index.html, I'm importing my Polymer custom element and linking the bootstrap stylesheet. If I inspect my custom element and its local DOM, I see that the bootstrap style is bleeding onto it. Is it because the shadow DOM polyfill of Polymer (shady DOM) does not support encapsulation?

I have tried setting the Polymer global DOM setting to "shadow", but that didn't help (maybe because I'm using Safari and THAT it does not support shadow DOM yet, but I have linked the full WebComponents library, so it's supposed to polyfill that).

Searching on SO, I found this question: External CSS affecting ("bleeding" into) shadow DOM with Polymer, but it is related to version 0.5 of Polymer, so I don't know how relevant it is for me right now.

Answer 1

Known limitations

• CSS encapsulation is limited.

This is a known limitation of the Shadow DOM polyfill.

Answer 2

Shadow DOM is not enabled by default in Polymer 1.0. This is because not all browsers currently support shadow DOM and it is incredibly hard to polyill so they didn't want people to experience different appearances in different browsers. You can turn this on however. See here for how to do this. More information on this here and here

Answer 3

Imagine the Shady DOM implementation something like jQuery plugin. when a plugin adds new elements to you DOM the are no encapsulated in any way.

you can force Polymer to work with shadow DOM but pay attention that it is not fully supported and the polyfill webcomponents.js is doing a heavy lifting to make it work, so the performance is no optimal.