Polymer добавить стиль динамически

Question

В качестве контроля полимера, «моей сетку», я пытаюсь добавить стиль с помощью кода ниже:

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

Здесь cssText может быть строка, как

.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); 
} 

Без этого пользовательские переменные, я могу добавить к styleElement по

this.$.gridContainer.appendChild(styleElement); 

Но тем не менее, так как есть пользовательские переменные, я не знаю, как исправить Эта проблема.

После присоединен элемент, я не могу изменить --oc-Col-ID-0-флекс-базисный значение через

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

Похоже, что переменные типа не применяются к элементу ,

Я не уверен, есть ли способ динамически добавлять/изменять стиль элемента. Я не уверен, что я на правильном пути.

Answer 1

Это то, что я делаю в конце, чтобы динамически вводить стиль. Он решил мою проблему до сих пор.

  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     
      }