CODEWITHSUNDEEP
javascriptcsstwitter-bootstrappolymershadow-dom
nmizar
nmizar

Reputation: 123

Bootstrap styles not applying within a Shadow DOM on Chrome 35

I've working with Bootstrap 3.1.1 and Polymer 0.2.4 for a long time and, suddenly -it may have been since the last Chrome auto-update (Version 35.0.1916.114)- Bootstrap stopped styling Shadow DOM elements. I've been able to check that the CSS classes within those nodes do not appear when inspecting the (Shadow) DOM with Chrome DevTools. In other browsers, such as Firefox, it is still working.

I don't know whether this is something I'm missing or some kind of bug, but this odd styling behaviour can be seen too directly on jsbin. I'm including two adapted chunks of code extracted from an actual component to illustrate my problem:

Please, notice that what I wanted to stress in the previous examples were just the differences between how CSS styling is being applied (or not).

Thanks in advance,

Nacho

P.S. I've also checked it with Polymer 0.3.1 with the same result.

Upvotes: 2

Views: 4377

Answers (1)

ebidel
ebidel

Reputation: 24109

What you're seeing is the difference between native Shadow DOM and the polyfill. The first example works because the styles are not crossing a shadow dom boundary. They're just applied to the light dom.

The solution is to include the stylesheets in your element. More info:

Upvotes: 2

Related Questions