Polymer 1.0 - 样式不适用于计算的 class 属性

Question

这是 jsbin。

当使用 _computedClass() 函数为 paper-card 提供 class="red" 时，它不会应用 paper-card.red 样式。

在下面的屏幕截图中突出显示的是 paper-card 和 class="red" 就像上面的一样，但样式不适用。我希望背景也是红色的。

Answer 1

在 v1.6.0 之前，Polymer 的自定义属性 shim 在创建时仅应用一次样式（在应用绑定之前）。同样来自 Polymer docs on Styling:

Dynamism limitations

Only property definitions which match the element at creation time are applied. Any dynamic changes that update property values are not applied automatically. You can force styles to be re-evaluated by calling the updateStyles method on a Polymer element, or Polymer.updateStyles to update all element styles.

因此您可以在 attached 回调中调用 this.updateStyles() 以应用来自自定义属性:

的 CSS mixin

Polymer({
  ...
  attached: function() {
    this.updateStyles();
  }
);

jsbin

或者，您可以升级到最新的 Polymer 版本 (v1.7.0)，其中包括对本机 CSS 属性的支持（在 v1.6.0 中发布）。这避免了调用 this.updateStyles() 来应用动态 CSS 样式的需要。确保在导入之前设置 lazyRegister:true 和 useNativeCSSProperties:true polymer.html:

<script>
  window.Polymer = {
    ...
    lazyRegister: true,
    useNativeCSSProperties: true
  };
</script>
<link rel="import" href="https://polygit.org/polymer+1.7.0/components/polymer/polymer.html">

jsbin

Polymer 1.0 - 样式不适用于计算的 class 属性

Polymer 1.0 - Styles not working for computed class attribute

css

polymer

polymer-1.0

Dynamism limitations