引导样式在Chrome 35的阴影DOM中不适用

Bootstrap styles not applying within a Shadow DOM on Chrome 35

本文关键字：阴影 DOM 不适用 样式 Chrome      更新时间：2023-09-26

我一直在使用Bootstrap 3.1.1和Polymer 0.2.4很长一段时间，突然-可能是自从上次Chrome自动更新(版本35.0.1916.114)- Bootstrap停止样式Shadow DOM元素。我已经能够检查这些节点内的CSS类不出现时，检查(阴影)DOM与Chrome DevTools。在火狐(Firefox)等其他浏览器中，它仍然可以工作。

我不知道这是我错过的东西还是某种bug，但是这种奇怪的样式行为可以在jsbin上直接看到。我从一个实际组件中提取了两段经过改编的代码来说明我的问题:

  • http://jsbin.com/yugih/1/(工作示例)
  • http://jsbin.com/maleg/1/(非工作示例)

请注意，在前面的例子中，我想强调的只是如何应用(或不应用)CSS样式之间的差异。

提前感谢，

纳

注:我也检查了它与聚合物0.3.1相同的结果。

你看到的是本地Shadow DOM和polyfill之间的区别。第一个例子之所以有效，是因为样式没有跨越阴影dom边界。它们只是被应用到light dom。

解决方案是在元素中包含样式表。更多信息:
  • https://twitter.com/polymer/status/468803383982190592
  • https://groups.google.com/forum/!searchin polymer-dev/风格/polymer-dev/lv8JznvOH4s bootsrap 20美元/1 mzv5oadrbgj
相关文章：