以编程方式更改样式

Question

我试图遵循Polymer元素 docs 的Custom属性API关于以编程方式更新元素的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();
}

我已经创建了一个代码库来演示这个问题

Answer 1

您已经遇到当前版本的Polymer中的错误,其中像这样的样式更改将传播到子Polymer元素,但不会传播到元素本身.看到:

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

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

这是更新的codepen.