Bootstrap styles not used in Shadow DOM on Chrome 35

Question

I have been working with Bootstrap 3.1.1 and Polymer 0.2.4 for a long time and, possibly, since the last update of Chrome (version 35.0.1916.114) - Bootstrap stops styling Shadow DOM elements. I was able to verify that the CSS classes inside these nodes do not appear when validating the DOM with Chrome DevTools. In other browsers, such as Firefox, it still works.

I don’t know if this is something that I don’t see or something like an error, but this strange style behavior can be seen directly on jsbin. I include two adapted snippets of code extracted from a real component to illustrate my problem:

• http://jsbin.com/yugih/1/ (working example)
• http://jsbin.com/maleg/1/ (non-working example)

Please note that what I wanted to emphasize in the previous examples was just the difference between how CSS styling is applied (or not).

Thanks in advance,

Nacho

PS I also tested it with Polymer 0.3.1 with the same result.

Answer 1

What you see is the difference between the built-in shadow DOM and polyfill. The first example works because styles do not cross the shadow border. They just apply to the light.

The solution is to include style sheets in your element. Additional Information:

• https://twitter.com/polymer/status/468803383982190592
• https://groups.google.com/forum/#!searchin/polymer-dev/bootsrap $20style/polymer-dev/lv8JznvOH4s/1mzv5oadRbgJ