Question

我试图从自定义元素

的属性值控制shadow DOM元素的样式

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

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

的index.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>

Answer 1

我不认为这是可能的，但我不完全确定你可以做什么，将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>

Polymer2.0 - 可以从自定义元素的属性值控制shadom元素样式

1 个答案: