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

Question

这里是jsbin。

在为paper-card class="red"提供_computedClass()功能时，它不会应用paper-card.red个样式。

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

Answer 1

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

  

动态限制

     

仅应用在创建时与元素匹配的属性定义。更新属性值的任何动态更改都不会自动应用。您可以通过调用Polymer元素上的updateStyles方法或Polymer.updateStyles来更新所有元素样式来强制重新评估样式。

因此，您可以在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