我可以制作外部模板风格吗？

Question

在谷歌聚合物课1 ，他们有包含内联样式表的示例。 我想将它移动到CSS文件，但样式在模板标记内。 更糟糕的是，它说它是

在Shadow DOM树内使用，：主机伪类匹配 托管树的元素。在这种情况下，它匹配 元素。

Q：我可以将此风格移动到CSS文件吗？

Answer 1

如果您想要样式是自定义元素Shadow DOM的一部分的元素，则必须使用::shadow选择器，或者如果要选择元素，则无论深度坐在阴影DOM内部有多少级别。

所以从外面那里，你会拟合一个世代的世代odicetagcode的Shadow Dom，如下所示：

x-foo::shadow p {

}

.

您可以在此处读取所有这些内容： http：//www.polymer-project.org/articles/styling-eLements.html

Answer 2

如果从此页面（或只是查看列出的内容），您将看到它使用外部CSS文件。您可以检查元素HTML查看它是如何使用的，但它非常简单：

<polymer-element name="seed-element" attributes="notitle author">

  <template>

    <link rel="stylesheet" href="seed-element.css" />

    <h1>Hello from seed-element</h1>
    <content></content>

  </template>
  <script>

    Polymer('seed-element', {
      //...
    }
  </script>
</polymer-element>

. 然后在Seed-Element.css中默认情况下您需要以下内容：

:host {
  display: block;
}

.

我理解它的方式（在我有限的知识中）是，如果你要将种子元素重命名为我的元素，这将与做同样的方式

my-element {
  display: block;
}

.