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。

以编程方式更改样式

1 个答案: