Question

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

我可以将所有样式直接移动到元素的模板中，但有时我们的css选择器会桥接Shadow DOM间隙。 e.g：

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

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

处理此问题的正确方法是什么？ Polymer有一个功能可以让全局样式通过吗？

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

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

Answer 1

您所看到的是polyfill和原生Shadow DOM之间的区别。之前应用的选择器不再以SD为目标元素。

要从SD外部对样式元素进行样式处理，可以使用/deep/组合子和::shadow伪元素。例如，要将所有h1的红色设置为样式，无论它们出现在哪个树中使用：

body /deep / h1 {
  color: red;
}

这两篇文章包含SD样式内容的所有细节：

Answer 2

如果像我一样，您正在寻找一种方法来集中设计整个网站中的常见元素而不仅仅是一个影子DOM，我想出的一个策略是使用全局样式表作为单独的文件并将其包含在所有自定义元素的模板。这样您就不会重复样式或繁琐地引用嵌套级别的元素，但您仍然可以利用样式范围。

Answer 3

我的回答可能有点迟了，但我遇到了类似的问题。但是这个问题只是在我从shady DOM变为shadow DOM之后才出现的。如果使用shadow DOM，则需要包含如下所述的样式：

https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

E.g。你会这样做：

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style>
  </template>
</dom-module>

然后将其包含在您的元素中，如下所示：

<style include="shared-styles">
  :host { display: block; }
</style>

我希望这有助于某人。

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

3 个答案: