ポリマー1.0 - プロパティを持つCSSクラスをバインドする

Question

CSSクラスをpaper-progressにバインドしようとすると、myプロパティの値がアイテムの色を変更します。 GitHubのPolymerの例とデータバインディングのドキュメントをベースにしています。ここで

私のコード：http://jsbin.com/bidebe/10/edit?html,output

正しくpaper-progress変化のクラスが、色はしていません。 クラスの色を直接入力すると、色が正しくなります。

私はなぜpaper-progressに良いクラスがありますが、それを適用しない理由を理解できません。 誰かが私にそれを理解するのを助けることができれば、ありがとう。

Answer 1

これはおそらくあなたを助けるでしょう。

 attached: function() { 
      this.async(function() { 
       var paperProgressArray = this.querySelectorAll('paper-progress');//get all paper-progress 
       var i = 0; 
       var j = paperProgressArray.length; 

       var color; 
       var secundary; 
       var paperProgress; 
       var dificulty; 
       while (i < j) { 
        paperProgress = paperProgressArray[i]; 
        dificulty = paperProgress.value; 
        if (0 <= dificulty && dificulty <= 4) { 
         color = 'red'; 
         secundary = "green"; 
        } else if (4 < dificulty && dificulty <= 7) { 
         color = 'green'; 
         secundary = "red"; 
        } else if (7 < dificulty && dificulty <= 10) { 
         color = 'yellow'; 
         secundary = "green"; 
        } 
         //set and update colors 
        paperProgress.customStyle['--paper-progress-active-color'] = color; 
        paperProgress.customStyle['--paper-progress-secondary-color'] = secundary; 
        this.updateStyles(); 
        i++; 
        } 
       }); 
      }, 

Answer 2

私は（https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-properties-shim---limitations-and-api-details