Question

我正在使用聚合物v1.9.1并在Chrome上进行测试。

我有一个包含<paper-input>的自定义元素，我希望它的文本颜色依赖于其他一些属性。自定义属性--paper-input-container-input-color或--primary-text-color的颜色为determined，因此我为这些设置了依赖于类的值：

#input { --primary-text-color: red; }
#input.green { --primary-text-color: green; }

<paper-input id='input' class$='[[_getClasses(checked)]]'></paper-input>

_getClasses: function(checked) { return checked ? '':'green'; }

文本总是红色，我猜是因为垫片中的this limitation（我想我的浏览器必须使用它）。所以我添加了对updateStyles的调用：

_getClasses: function(checked) {
  this.async(function() {
    this.$.input.updateStyles();
  });
  return checked ? '':'green'; }
}

现在它在checked首次更改后正常工作，但初始状态不正确（即如果checked最初为false，则它最初为红色但应为绿色）。我尝试将另一个async(updateStyles())添加到ready但没有运气（但如果我从javascript控制台调用input.updateStyles（）它会自行更正）。我该如何解决这个问题？

完整示例：http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/

Answer 1

我已使用修复程序更新了plunk。我在attached回调中更新了样式，而不是ready。

_getClasses: function(checked) {
    return checked ? '' : 'green';
  },
  attached: function() {
    this.updateStyles();
  }

动态更新自定义属性

1 个答案: