Question

在Google Polymer lesson 1中，他们有一个包含内联样式表的示例。我想将它移动到css文件，但样式在模板标签内。更糟糕的是，它说它是

在shadow DOM树中使用：host伪类匹配承载树的元素。在这种情况下，它匹配元件。

问：我可以将此样式移动到css文件吗？

Answer 1

如果从this page下载种子元素（或只是查看列出的内容），您将看到它使用外部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;
}

我理解它的方式（在我有限的知识中）是，如果你要将seed-element重命名为my-element，这将与执行

相同

my-element {
  display: block;
}

Answer 2

如果要对属于自定义元素Shadow DOM的元素进行样式设置，则必须使用::shadow选择器或/deep/选择器，如果要选择元素而不管它们的深度是多少坐在Shadow DOM里面。

因此，从外部来看，您可以在p的Shadow DOM中设置一个x-foo元素，如下所示：

x-foo::shadow p {

}

您可以在此处阅读所有相关内容：http://www.polymer-project.org/articles/styling-elements.html

我可以在外部制作模板样式吗？

2 个答案: