聚合物主题问题

Question

我使用 AppToolbox (polymer cli) 创建了一个新的 polymer 应用程序，现在我正在尝试添加一个从 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 样式，但我没有看到应用于项目的模板。

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

说明：

Answer 1

TL;DR 似乎允许这些主题与 Polymer 1.5.0 一起正常工作的唯一方法是 link [=15= 中提供的样式表] 与：

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

plunker

来自 https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of 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

聚合物主题问题

Issue with polymer theme

polymer

polymer-1.0