ポリマーが、私は以下のコードを経由してスタイルを追加しようとしている、「私のグリッド」、動的

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

のような文字列を指定できますこのカスタム変数なし

、私は

this.$.gridContainer.appendChild(styleElement); 

でstyleElementを追加することができます。しかし、カスタム変数があるので、しかし、私が解決するかどうかはわかりません この問題。

要素が装着された後、私はスタイル変数を要素に適用されていないことを

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

に見え経由 - OC-COL-ID-0-フレックス基準値を変更することはできません。 。

要素のスタイルを動的に追加/変更する方法がないかどうかはわかりません。私は正しい道にいるかどうか分からない。

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     
      }