以编程方式更改样式

Question

我正在尝试遵循 Custom property API for Polymer elements 文档以编程方式更新元素的 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>

我也尝试过不设置 CSS 属性并使用直接样式，例如：

redClick: function() {
    console.log('Setting "color" red');
    this.customStyle['color'] = 'red';
    this.updateStyles();
}

我创建了一个 codepen 来演示这个问题

Answer 1

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

https://github.com/Polymer/polymer/issues/1851

解决方法是调用Polymer.updateStyles() 而不是this.updateStyles()。

这是更新后的codepen。