Bootstrap样式不适用于Chrome 35的Shadow DOM [英] Bootstrap styles not applying within a Shadow DOM on Chrome 35

问题描述

我使用Bootstrap 3.1.1和Polymer 0.2.4已有很长时间了，突然-可能是自上次Chrome自动更新(版本35.0.1916.114)以来-Bootstrap停止了对Shadow DOM元素的样式设置.使用Chrome DevTools检查(Shadow)DOM时，我已经能够检查出那些节点内的CSS类没有出现.在其他浏览器(如Firefox)中，它仍然可以正常工作.

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.

我不知道这是我缺少的东西还是某种错误，但是这种奇怪的样式行为也可以直接在jsbin上看到.我包括从实际组件中提取的两个经过修改的代码块，以说明我的问题:

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/(工作示例)
• http://jsbin.com/maleg/1/(无效示例)

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

请注意，在前面的示例中，我要强调的只是CSS样式的应用方式之间的差异(或没有).

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).

预先感谢

Nacho

P.S.我还用Polymer 0.3.1进行了检查，结果相同.

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

推荐答案

您看到的是本机Shadow DOM和polyfill之间的区别.第一个示例之所以有效，是因为这些样式没有跨越阴影dom边界.它们只是应用于轻便的dom.

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://twitter.com/polymer/status/468803383982190592
• https://groups.google.com/forum/#!searchin/polymer-dev/bootsrap$20style/polymer-dev/lv8JznvOH4s/1mzv5oadRbgJ

这篇关于Bootstrap样式不适用于Chrome 35的Shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！