Polymer изменение цвета бумаги вертушка через класс с привязки данных

Question

Я использую полимерную бумажную вертушку в моем веб-компоненты:

<dom-module id="custom-spinner"> 
    <style include = 'custom-spinner-styles'> 

    paper-spinner.yellow{ 
     --paper-spinner-layer-1-color: yellow; 
     --paper-spinner-layer-2-color: yellow; 
     --paper-spinner-layer-3-color: yellow; 
     --paper-spinner-layer-4-color: yellow; 
    } 

    </style> 

    <template> 
    <div class = "loader"> 
     <paper-spinner class$="{{color}}"></paper-spinner> 
    </div> 

    <content> 
    </content> 
    </template> 

</dom-module> 

<script> 
    etc.... 
</script> 

Я использую это так:

<custom-spinner color = "yellow" size = "200px" fade-in-sp = "500" fade-out-sp = "400"></custom-spinner> 

Теперь проблема в том, что работа по привязке данных и класс бумажных прядильщиков установлены на желтый, но стили не применяются.

Если я устанавливаю 'yellow' непосредственно работает отлично:

<paper-spinner class="yellow"></paper-spinner> 

Любые идеи, где проблема?

Справка была бы принята с благодарностью.

Answer 1

Я использую привязки данных для стилизации в моей gold-password-input, и она работает так:

.None { 
    color: var(--gold-password-input-strength-meter-none-color, --paper-grey-700) !important; 
    } 
    .VeryWeak { 
    color: var(--gold-password-input-strength-meter-veryweak-color, --paper-red-700) !important; 
    } 
    .Weak { 
    color: var(--gold-password-input-strength-meter-weak-color, --paper-orange-700) !important; 
    } 
    .Medium { 
    color: var(--gold-password-input-strength-meter-medium-color, --paper-yellow-700) !important; 
    } 
    .Strong { 
    color: var(--gold-password-input-strength-meter-strong-color, --paper-blue-700) !important; 
    } 
    .VeryStrong { 
    color: var(--gold-password-input-strength-meter-verystrong-color, --paper-green-700) !important; 
    } 

и

<span id="strengthLabel"> 
    [[strengthMeterLabels.Label]]: 
    <span class$=[[_strengthMeterScore]]>[[_computeStrengthMeterLabel(_strengthMeterScore)]]</span> 
    <paper-icon-button icon="info" alt="info" disabled noink></paper-icon-button> 
</span>