我已经使用 Bootstrap 3.1.1 和 Polymer 0.2.4 很长时间了,突然之间(可能是自上次 Chrome 自动更新(版本 35.0.1916.114)以来)Bootstrap 停止了 Shadow DOM 元素的样式设置。当使用 Chrome DevTools 检查(影子)DOM 时,我已经能够检查这些节点中的 CSS 类是否不会出现。在其他浏览器中,例如 Firefox,它仍然可以工作。
我不知道这是我遗漏的东西还是某种错误,但是这种奇怪的样式行为可以直接在 jsbin 上看到。我包括从实际组件中提取的两个改编代码块来说明我的问题:
- http://jsbin.com/yugih/1/ (工作示例)
- http://jsbin.com/maleg/1/ (非工作示例)
请注意,我在前面的示例中想强调的只是应用(或不应用)CSS 样式之间的差异。
提前致谢,
纳乔
附注我还用 Polymer 0.3.1 进行了检查,结果相同。
最佳答案
您所看到的是原生 Shadow DOM 和 polyfill 之间的区别。第一个示例之所以有效,是因为样式没有跨越 Shadow dom 边界。它们只是应用于 light dom。
解决方案是将样式表包含在您的元素中。更多信息:
- https://twitter.com/polymer/status/468803383982190592
- https://groups.google.com/forum/#!searchin/polymer-dev/bootsrap $20style/polymer-dev/lv8JznvOH4s/1mzv5oadRbgJ
关于javascript - Bootstrap 样式不适用于 Chrome 35 上的 Shadow DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24108315/