样式中带有 :host 的 Polymer @import 主题文件没有影响

Question

回到另一个 Polymer 问题，我有一个 Polymer/Electron 应用程序，我正在尝试设计它的样式。

我想创建一个 theme.css，其中包含一个 :host 块，其中包含我的整个主题，然后我可以将其导入到我的模块样式表中，但我尝试了一些不同的东西并尝试了在文档中查找任何内容都无济于事。

到目前为止，我已经在 <template> 定义之外的和中进行了尝试：

<link rel="stylesheet" href="./account-list.css"> 与 @import
<style>@import 'my-theme.css';</style> 就在我的 <link>
之上 :root 而不是我的 theme.css

中的 :host

但这两个似乎都不起作用，theme.css 确实被请求但对模块的样式没有影响。

Polymer 有没有这样的主题，我真的不想有一个构建步骤。

Answer 1

在 Polymer 1.1 中引入了一个名为 style module 的新概念（实际上是幕后的 dom-module 元素）（阅读 here) and the old way of including external stylesheets has been deprecated (read it here）。

基本上，您需要创建一个 html 文件，就像通常创建元素来存储样式一样。 id 定义稍后将引用的此文件的名称。

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

那么显然你需要在你的页面中导入这个文件。

<link rel="import" href="shared-styles.html">

现在，有两种情况。

如果您在文档级别使用 custom-style，您需要包含您之前定义的 样式模块 -

<style is="custom-style" include="shared-styles"></style>
如果您只是想将 样式模块 包含在您的其中一个中元素，这样做 -

<dom-module id="my-element"> <style include="shared-styles"></style>

看看演示这两种情况的 plunker。

请记住，在您的特定示例中，由于您使用的是 :host，我假设您将使用方案 2。因此 plunker 应该更清楚一些。

Answer 2

使用 dom-module 概念，为了使用外部第三方，我做了下一个并且它正在工作，但可能不是 Polymer 的最佳实践。

Dom 带有第 3 方的模块 css (third-party-styles.html)

<dom-module id="third-party-styles">
    <link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>

我创建了一个容器（elements.html），其中导入了所有需要的html模块，并在那里注册了第三方样式模块和我的模块

<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">

然后我在 index.html

的头部添加了 elements.html

<head>
    ...
    <link rel="import" href="elements.html">
<head>
<body>
    <my-module></my-module>
</body>

在我的聚合物元素中 (my-module.html)

<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
    <style include="third-party-styles"></style>
    <template>
        <p class=".thirdPartyClass">Content with third party css rule</p>
    </template>
</dom-module>

有什么反馈吗？

样式中带有 :host 的 Polymer @import 主题文件没有影响

Polymer @import theme file with :host in styles has no affect

css

polymer

electron