Polymer Stil verleihen dynamisch

Question

In einem Polymer Kontrolle, 'mein-grid', ich versuche Stil über den folgenden Code hinzufügen:

var styleElement = document.createElement('style', 'custom-style'); 
styleElement.innerHTML = cssText; 
Polymer.StyleDefaults.addStyle(styleElement); 

Hier kann der cssText sein String wie

.oc-col-id-0{ 
    flex-basis: var(--oc-col-id-0-flex-basis); 
    -webkit-flex-basis: var(--oc-col-id-0-flex-basis); 
} 
.oc-col-id-1{ 
     flex-basis: var(--oc-col-id-1-flex-basis); 
     -webkit-flex-basis: var(--oc-col-id-1-flex-basis); 
} 

Ohne diese benutzerdefinierten Variablen, kann ich die styleElement von

this.$.gridContainer.appendChild(styleElement); 

Aber wie auch immer anhängen, da benutzerdefinierte Variablen gibt es, ich bin nicht sicher, wie sie zu beheben dieses Problem.

Nachdem das Element angebracht ist, kann ich nicht den -OC-col-id-0-flex-Basis-Wert über

this.customStyle['--oc-col-id-0-flex-basis'] = maxWidth + "px"; 
this.updateStyles(); 

ändere Es sieht aus, dass der Stil Variablen für das Element nicht angewandt werden .

Ich bin nicht sicher, ob es eine Möglichkeit gibt, den Stil des Elements dynamisch hinzuzufügen/zu ändern. Ich bin mir nicht sicher, ob ich auf dem richtigen Weg bin.

Answer 1

Dies ist, was ich am Ende, um die Stilklasse dynamisch zu injizieren. Es hat mein Problem bisher gelöst.

  var style = this._styles[0]; 
      var text = style.textContent; 
      var cssText = ""; 
      for (var id of ids) 
      { 
       var classStyle = ".col-id-" + id; 

       var variableProperty = "--col-id-" + id + "-flex-basis"; 
       if (text.indexOf(classStyle) == -1) 
       { 
        cssText += classStyle + "{ flex-basis: var(" + variableProperty + ", auto); -webkit-flex-basis: var(" + variableProperty + ", auto);} "; 
       } 

       if (this._ownStylePropertyNames.indexOf(variableProperty) == -1) 
       { 
        this._ownStylePropertyNames.push(variableProperty); 
       } 
      } 

      if (cssText.length > 0) 
      { 
       style.textContent += " " + cssText; 
       style.__cssRules = null; //trick for rulesForStyle method in Polymer.html     
      }