如何使用外部样式表为Polymer 1.0元素设置样式？

Question

Polymer 1.0元素包含自定义CSS变量，您可以使用内联样式来对其进行样式设置，如下所示：

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-color: blue;
  }
</style>

这个方法很有效，非常好。我怎样能够做到相同的效果，但使用外部样式表？ 在链接标记中添加is="custom-style"似乎没有任何效果，因为下面的代码不起作用：

<link rel="stylesheet" media="all" href="app.css" is="custom-style">

- David Smith

Answer 1

您可以像加载 Polymer 元素一样加载包含您的 custom-style 的 HTML 文件：

<link rel="import" href="my-custom-style.html">

你的my-custom-style.html文件应包含：

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar-color: blue;
    }
</style>

自 Polymer 1.1 起，此功能已被弃用。请参阅此处以获取更新的答案。

- Ben Thomas

---

这是Polymer团队为Paper元素使用的模式:https://github.com/polymerelements/paper-styles - Zikes

但是如果你使用meteorjs，它会自动将所有CSS文件合并成一个文件，那该怎么办呢？你无法控制meteor中的样式标签如何编写，也无法导入带有CSS的自定义HTML文件（当然你可以这样做，但这意味着你会生成更多的HTTP请求）。 - Andreas Galster

请注意，此方法在Polymer 1.1中已被弃用（https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets）。请查看我的答案（https://dev59.com/RI7ea4cB1Zd3GeqPDZzl#32302856）以回答这个问题。 - Justin XL

感谢JustinXL指出这一点。我会在我的回答中放上链接。 - Ben Thomas