全局样式未应用于Chrome 36中Polymer元素中的Shadow DOM子项

Question

在Chrome 34中,带有<style>标记的标题中定义的样式将影响Polymer元素的Shadow DOM中的元素.在Chrome 36中,情况并非如此.

我可以将所有样式直接移动到元素的模板中,但有时我们的css选择器会桥接Shadow DOM间隙.例如:

.something-outside .something-inside { ... }
.something-outside.foo .something-inside { ... }

后一种情况更加困难,因为它需要有关两个范围的信息.

处理这个问题的正确方法是什么？聚合物的特性是否会让全球风格通过？

非常有趣的是,我无法添加任何图像或超过2个链接而没有10个stackoverflow信誉点(whee),所以我能提供的最好的是这个jsbin:

http://jsbin.com/vobowigi/1/edit

Answer 1

你看到的是polyfill和native Shadow DOM之间的区别.之前应用的选择器不再是SD中的目标元素.

要从SD外部对元素进行样式化,可以使用/deep/组合子和::shadow伪元素.例如,要将所有h1红色设置为样式,无论它们出现在使用的是什么树:

body /deep / h1 {
  color: red;
}

这两篇文章包含SD样式的所有细节:

• http://www.polymer-project.org/articles/styling-elements.html
• http://www.polymer-project.org/docs/polymer/styling.html