Modifica delle variabili CSS tramite JS in Polymer

Question

Nel mio progetto Polimero, ho una barra degli strumenti con un colore che voglio modificare utilizzando JavaScript. Poiché Polymer utilizza la variabile CSS - paper-toolbar-background internamente per lo styling, non posso fare qualcosa come style.color. Ho trovato un metodo chiamato setProperty(), ma non funziona per me. Qualcuno ha già trovato una soluzione?

Answer 1

In sostanza,

1. Afferra l'elemento
2. Utilizzare la proprietà di alterare CustomStyle --paper-barra-sfondo
3. Run element.updateStyles()

prega di consultare i docs . [Modifica] Se ti serve un esempio, ne ho uno here.

Answer 2

Impostare il valore della variabile nella mappa di customStyle dell'elemento, quindi chiamare il metodo updateStyle.

Ecco un esempio di un elemento che modifica la propria visibilità modificando il valore di uno stile personalizzato che definisce. Anche la variabile può essere esterna.

<dom-module id="my-elem"> 

    <style> 
    :host { 
     display: block; 
     --my-elem-visibility: hidden; 
    } 
    #child { 
     visibility: var(--my-elem-visibility) 
    } 
    </style> 
    <template> 
    <div id="child">Some content goes here.</div> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 

     is: 'my-elem', 

     setVisible: function (visible) { 
      this.customStyle['--my-elem-visibility'] = 'visible'; 
      this.updateStyles(); 
     } 
    }); 
</script> 

Answer 3

Per impostare la variabile di CSS per la corrente Polymer.Element:

this.updateStyles({'--paper-toolbar-background': '#ed0'}); 

per impostare la variabile a livello globale usare:

Polymer.updateStyles({'--paper-toolbar-background': '#ed0'});