css - 带有 :host in styles has no affect 的 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而不是 :host在我的 theme.css

但似乎都不起作用，theme.css肯定会被请求，但不会影响模块的样式。

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

Answer 1

在 Polymer 1.1 中引入了一个名为 style module 的新概念(实际上是幕后的 dom-module 元素)(阅读 here )并且不推荐包含外部样式表的旧方法(阅读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">

现在，有两种情况。

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

   <style is="custom-style" include="shared-styles"></style>

2. 如果您只是想将样式模块包含在您的其中一个中 元素，这样做 -

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

看看这个plunker这展示了这两种情况。

请记住，在您的特定示例中，因为您使用的是 :host ，我假设你会选择场景 2。所以这个 plunker应该更清楚一些。