问题
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:
- http://jsbin.com/yugih/1/ (working example)
- http://jsbin.com/maleg/1/ (non-working example)
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.
回答1:
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:
- https://twitter.com/polymer/status/468803383982190592
- https://groups.google.com/forum/#!searchin/polymer-dev/bootsrap$20style/polymer-dev/lv8JznvOH4s/1mzv5oadRbgJ
来源：https://stackoverflow.com/questions/24108315/bootstrap-styles-not-applying-within-a-shadow-dom-on-chrome-35