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

【问题标题】：Can I make a template style external?我可以在外部制作模板样式吗？
【发布时间】：2014-07-30 18:01:07
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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;
}

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

my-element {
  display: block;
}

【讨论】：

:host 是一个选择器，它指定了shadowRoot 主机，对于带有<template> 定义元素本身的Polymer 元素。
感谢您的解释！
总结一下：外部样式表中的样式被 linked 从 Polymer 元素内部应用，就像它们在内联样式标签中一样。
使用 Polymer 1.6.1，在 template 内添加了 link，在 dom-module... 内添加了样式。
v1 的外部样式表 are deprecated。

【解决方案2】：

如果你想为自定义元素 Shadow DOM 中的元素设置样式，你必须使用 ::shadow 选择器，如果你想选择元素，无论它们位于 Shadow 内部有多少层，都必须使用 /deep/ 选择器DOM。

因此，从外部来看，您将在 x-foo 的 Shadow DOM 中设置 p 元素的样式，如下所示：

x-foo::shadow p {

}

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

【讨论】：

嗯 .. 它说“如果你感觉疯了”... 我不知道。将样式放入外部文件只是我的一种自动反应。可以从导入的 html 中链接到它吗？
A 好像我误解了你的问题。所以答案是肯定的！您可以将样式放入外部文件，方法如下：github.com/IonicWebComponents/ion-button/blob/master/…
但你仍然得到了复选标记！虽然没有难过的感觉;）