Polymer 1.0 - Binding CSS Class with Property

Question

I am trying to bind a CSS class to paper-progress with the value of my property to change the color of an element. I base my code on the Polymer example on GitHub and the data binding documentation.

Here is my code: http://jsbin.com/bidebe/10/edit?html,output

The paper-progress class changes correctly, but there is no color. If I put the class color directly, the color is correct.

Therefore, I do not understand why my paper-progress has a good class, but does not apply it. If anyone can help me figure this out, thanks.

Answer 1

It can help you.

  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

I think this explains the current behavior and gives you other ways to achieve what you want (Flavio's solution is probably close to what you need to do) https://www.polymer-project.org/1.0/docs/ devguide / styling.html # custom-properties-shim --- limitations-and-api-details