聚合物主题的问题答案

【问题标题】：Issue with polymer theme聚合物主题的问题
【发布时间】：2017-01-26 18:53:33
【问题描述】：

我使用 AppToolbox (polymer cli) 创建了一个新的聚合物应用程序，现在我正在尝试添加一个从 Polymer Theme 下载的主题。我按照以下说明进行操作：在您的标签内添加以下行在 webcomponents-lite.min.js 和其他 HTML 导入之后。

<link rel="import" href="path/to/theme.html">

要在自定义元素中使用主题，请添加以下行在您的标签内：

<link rel="import" href="path/to/theme.css" type="css">

当然，我在示例组件中删除了一些 css 样式，但我没有看到应用于项目的模板。

有人可以给我一些建议吗？

说明：

【问题讨论】：

这看起来很奇怪<link rel="import" href="path/to/theme.css" type="css">。我期待像<style include="theme-name"></style> 这样的东西。您确定您使用的是 1.0 使用说明而不是 0.5？
是的，我很确定，您可以在我的问题的链接共享中看到它。谢谢
它需要输入一个电子邮件地址，这就是我关闭页面的地方。
我添加了说明图片。
谢谢。这看起来仍然很奇怪。据我所知，Polymer 不支持直接导入 css。它要求它位于样式模块 polymer-project.org/1.0/docs/devguide/styling#style-modules 中

标签： polymer polymer-1.0

【解决方案1】：

TL;DR似乎允许这些主题与 Polymer 1.5.0 一起正常工作的唯一方法是将index.html 中提供的样式表链接到：

<link rel="stylesheet" href="path/to/theme.css">

plunker

https://polymerthemes.com/ 中关于在 <dom-module> 中导入 CSS 主题的说明与 Polymer 的 documentation on importing external stylesheets 一致，但不推荐使用对导入类型的支持，而支持 style modules。

但是，在我的实验中，即使是样式模块也不允许完全主题化。

试验：

在<dom-module>（deprecated）中导入提供的主题：
```
<dom-module id="x-button">
  <link rel="import" type="css" href="theme.css"> 
  ...
</dom-module>
```
结果： 样式仅限于自定义元素，但没有字体样式。 plunker

将提供的主题转换为样式模块，并将其包含在<dom-module>中：

<link rel="import" href="theme.html">
<dom-module id="x-button">
  <style is="custom-style" include="theme"></style>  <!-- partial styling -->
  ...
</dom-module>

结果： （与试用1效果相同） plunker

链接<dom-module>中提供的样式表：
```
<dom-module id="x-button">
  <link rel="stylesheet" href="theme.css">  
  ...
</dom-module>
```
结果： x-button 的样式完全符合预期，但样式泄漏到主页中，修改了主页的背景颜色和paper-button。 plunker

仅在index.html 中链接提供的样式表：

<head>
  <link rel="stylesheet" href="theme.css">  <!-- full styling -->
  ...
</head>
<body>
  <x-button></x-button>
</body>

结果： x-button 完全按照预期设置样式。 plunker

【讨论】：

您的解释非常好，非常感谢，我真的很感激。