聚合物@import主题文件:样式中的主机没有任何影响

Question

回到另一个聚合物问题,我有一个我正在尝试设计的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肯定是被要求但对模块的风格没有影响.

无论如何有聚合物这样的主题,我真的不希望有一个构建步骤.

Answer 1

在Polymer 1.1中引入了一个名为样式模块(实际上是dom-module幕后元素)的新概念(在此处阅读),旧的包含外部样式表的方法已被弃用(在此处阅读).

基本上,您需要创建一个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应该更清楚一点.