Polymer 以编程方式更改样式

我试图按照文档以编程方式更新元素的CSS属性（和样式），但似乎无法使其正常工作。以下是我目前的尝试：

<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">

<dom-module id="my-namecard">
  <style>
    :host {
      --color: green;
    }

    span {
      color: var(--color, orange);
    }
  </style>

  <template>
    <div>
      Hi! My name is <span>{{name}}</span>
    </div>
    <button on-click="redClick">Set text to Red</button>
    <button on-click="blueClick">Set text to Blue</button>
  </template>

  <script>
    Polymer({
      is: 'my-namecard',
      properties: {
        name: {
          type: String
        }
      },
      redClick: function() {
        console.log('Setting "--color" red');
        this.customStyle['--color'] = 'red';
        this.updateStyles();
      },
      blueClick: function() {
        console.log('Setting "--color" blue');
        this.customStyle['--color'] = 'blue';
        this.updateStyles();
      }
    });
  </script>
</dom-module>

<my-namecard name="Sean"></my-namecard>

---

我已经创建了一个示例来演示这个问题

您在当前版本的Polymer中遇到了一个bug，在这个bug中，这样的样式更改将传播到子Polymer元素，但不会传播到元素本身。见：

解决方法是调用

Polymer.updateStyles（）

，而不是

this.updateStyles（）

---

这是最新信息。

谢谢。有没有一种方法可以在没有自定义CSS属性的情况下使用customStyle[…]呢？如果您想设置标准样式属性（而不是自定义属性），那么您想要的是标准

样式
属性吗？（见附件）
redClick: function() {
    console.log('Setting "color" red');
    this.customStyle['color'] = 'red';
    this.updateStyles();
}