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

【问题标题】：Polymer @import theme file with :host in styles has no affect样式中带有 :host 的 Polymer @import 主题文件没有影响
【发布时间】：2015-11-24 17:39:18
【问题描述】：

回到另一个 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有这样的主题吗，我真的不想有构建步骤。

【问题讨论】：

标签： css polymer electron

【解决方案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">

现在，有两种情况。

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

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

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

看看这个plunker，它演示了这两种情况。

请记住，在您的特定示例中，由于您使用的是 :host，我假设您将使用场景 2。所以这个 plunker 应该更清楚一点。

【讨论】：

允许我使用@apply，因为我只想允许更改某些样式，因此我可以在任何不可更改的样式之上使用@apply。

【解决方案2】：

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

带有 3rd 方 css 的 Dom 模块 (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>

有什么反馈吗？

【讨论】：