カスタムプロパティへの動的更新

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が最初に偽である場合（すなわち、それは最初は赤間違っているされているが、グリーンになります）。私は別のasync(updateStyles())をreadyに追加しようとしましたが、運がありません（まだjavascriptコンソールからinput.updateStyles（）を呼び出すと、それ自体が修正されます）。これを回避するにはどうしたらいいですか？

コンプリート例：http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/

Answer 1

私は修正してplunkを更新しました。 readyの代わりにattachedコールバックのスタイルを更新しました。

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