Polymer 1.0 - Binding CSS Class with property

Question

I try to bind a CSS Class to a paper-progress with the value of my property for change the item's color. I base my code on the Polymer's example on GitHub and the documentation of Data-binding.

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

The class of the paper-progress changes correctly, but the color doesn't. If I put the class color directly, the color is correct.

So I don't understand why my paper-progress has the good class but doesn't apply it. If someone can help me to understand that, thanks.

Answer 1

This maybe will 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++;
                    }
                });
            },