Search code examples
cssweb-componentpolymer-1.0shadow-dompolyfills

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

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.

Solution

  • Known limitations

    • CSS encapsulation is limited.

    This is a known limitation of the Shadow DOM polyfill.