如何使用外部样式表来设置 Polymer 1.0 元素的样式？答案

【问题标题】：How can an external stylesheet be used to style Polymer 1.0 elements?如何使用外部样式表来设置 Polymer 1.0 元素的样式？
【发布时间】：2015-11-17 17:36:53
【问题描述】：

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">

【问题讨论】：

标签： css polymer polymer-1.0

【解决方案1】：

您可以像使用聚合物元素一样加载包含 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 开始，此功能现已弃用。请参阅here 获取更新答案

【讨论】：

这是 Polymer 团队用于他们的 Paper 元素的模式：github.com/polymerelements/paper-styles
但是如果你使用meteorjs，你会怎么做，它会自动将每个css文件连接成一个？您无法影响在流星中如何编写样式标签，也不能使用 css 导入自定义 html 文件（当然可以，但这意味着您会生成更多的 http 请求）
请注意，此方法现已在 Polymer 1.1 (polymer-project.org/1.0/docs/devguide/…) 中弃用。看看我对这个问题的回答 (stackoverflow.com/questions/32298500/…)。
感谢您指出 JustinXL。我会把链接放在我的答案中。