0

我正在尝试从自定义元素的属性值来控制阴影 DOM 元素的样式

例如，我给了等于蓝色的类，如果我想从“红色”之类的属性中提供不同的颜色和控制，并且不想在自定义元素样式中定义所有类

http://plnkr.co/edit/5nh0slRj91NqNT7NjUKH?p=preview

索引.html

<!-- Load the polyfills -->
<script src="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="x-foo.html">

<x-foo class="blue"></x-foo>
<x-foo class="red"></x-foo>

x-foo.html

<!-- import polymer-element -->
<link rel="import" href="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/polymer/polymer-element.html">

<dom-module id="x-foo">
    <template>
        <style>
            :host { font-family: sans-serif; }
            :host(.blue) {color: blue;}
            :host(.red) {color: red;}
            :host(:hover) {color: green;}
        </style>
        <p>Hi, from x-foo!</p>
    </template>
  <script>
    class XFoo extends Polymer.Element {
      static get is() {
        return "x-foo";
      }
    }
    customElements.define(XFoo.is, XFoo);
  </script>
</dom-module>
4

1 回答 1

0

我不认为这是可能的，但我不完全确定。
您可以做什么，将 set 属性绑定到其中一个元素的内联样式。这可能不是您正在寻找的东西，但它可能会有所帮助。

元素：

<x-foo color="red"></x-foo>

在这里，您也可以绑定一个值并以编程方式更改颜色


x-foo 内部：

<dom-module id="x-foo">

 <template>
    <style>
    </style>

    <p style$="[[color]]">Hi, from x-foo!</p>
 </template>

 <script>
  class XFoo extends Polymer.Element {
    static get is() { return ‘x-foo’; }

    static get config() {
      return {
        properties: {
          color: String
        }
      }
    }

  }
  customElements.define(XFoo.is, XFoo);
 </script>
</dom-module>
于 2017-07-25T07:20:58.890 回答