Question

我在设计组件时遇到了麻烦。当我构建我的结构时：

<dom-module id="content-area">
   <template>
      <my-button class='red'>Hello</my-button>
      <my-button class='green'>Hello</my-button>
   </template>
</dom-module>

我如何使用外部html文件custom-style.html

设置样式

<custom-style>
   <style is="custom-style">
       :host(.red) {
          color: red;
       }
       :host(.green) {
          color: green;
       }
   </style>
</custom-style>

我做错了什么？有什么建议？

Answer 1

要使用自定义样式，您可以与所有组件共享：正如@Alberto Marin解释的那样，包括样式文件

is.na

在custom-style.html中包含你的样式块和元素，如下所示：

<link rel="import" href="custom-style.html">
<dom-module id="content-area">
  <template>
    <style include="custom-stle">
    </style>
     <my-button class='red'>Hello</my-button>
     <my-button class='green'>Hello</my-button>
  </template>
</dom-module>

Answer 2

如果要使用外部文件为组件设置样式，则必须按照Polymer文档中的说明进行操作：https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom

在您的情况下，您拥有组件：

<link rel="import" href="custom-style.html">

on custom-style.html

<style>
:host(.red) {
          color: red;
       }
       :host(.green) {
          color: green;
       }
</style>

我如何在同一个地方使用相同的元素？

2 个答案: