Polymer2.0 - 是否可以从自定义元素的属性值控制阴影元素样式答案

【问题标题】：Polymer2.0 - is it possible to control the shadom elements style from attribute value of custom elementPolymer2.0 - 是否可以从自定义元素的属性值控制阴影元素样式
【发布时间】：2017-12-30 20:18:39
【问题描述】：

我正在尝试从自定义元素的属性值控制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>

【问题讨论】：

标签： shadow-dom polymer-2.x polymer-2.0

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

【讨论】：