自定义动态更新 属性

Question

我正在使用 polymer v1.9.1 并在 Chrome.

上进行测试

我有一个包含 <paper-input> 的自定义元素，我希望它的文本颜色取决于其他 属性。这种颜色是自定义属性 --paper-input-container-input-color 或 --primary-text-color 的 determined，所以我为它们设置了一个 class 依赖值：

#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'; }

文本总是红色的，我猜是因为 shim 中的 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();
  }