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

Question

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

在shadow DOM树中使用:host伪类与托管树的元素匹配.在这种情况下,它匹配元素.

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

Answer 1

如果从此页面下载种子元素(或只是查看列出的内容),您将看到它使用外部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;
}