スタイリング：Javascriptを使用したポリマーエレメントのホスト

Question

カスタムポリマーエレメントの:host{}をJavascript（動的）でスタイルしたいと思います。スタイルを設定したいプロパティは、ユーザーの画面サイズ（テキストは常に1行に表示されます）に応じて変化する「線高さ」です。

私は2つの異なる方法を使用しているsulotion見つけるための試みで：
を最初は通常のjQueryを使っている：

<dom-module is="custom-element"> 
     <template> 
      <style> 
       :host { 
        position: relative; 
        display: inline-block; 
        min-width: 5.15em; 
        min-height: 2em; 
        padding: 0.5em; 
        background: transparent; 
        font-size: 1.3em; 
        outline: none; 
        cursor: pointer; 
        color: #ABCFCA; 
        text-transform: uppercase; 
        text-align: center; 
        overflow: hidden; 
       } 
      </style> 
      <content></content> 
     </template> 
     <script> 
      Polymer({ 
       is: "custom-element", 
       properties: { 

       }, 
       ready: function() { 
        $(this).css("line-height", $(this).height() + "px"); 
       } 
      }); 
     </script> 

私が試した第2の方法は、ポリマーのカスタムを使用していますCSSのプロパティ：

<dom-module is="custom-element"> 
     <template> 
      <style> 
       :host { 
        position: relative; 
        display: inline-block; 
        min-width: 5.15em; 
        min-height: 2em; 
        padding: 0.5em; 
        background: transparent; 
        font-size: 1.3em; 
        outline: none; 
        cursor: pointer; 
        color: #ABCFCA; 
        text-transform: uppercase; 
        text-align: center; 
        overflow: hidden; 
        line-height: --dynamic-line-height; 
       } 
      </style> 
      <content></content> 
     </template> 
     <script> 
      Polymer({ 
       is: "custom-element", 
       properties: { 

       }, 
       ready: function() { 
        this.customStyle['--dynamic-line-height'] = $(this).height(); 
        this.updateStyles(); 
       } 
      }); 
     </script> 

第一の方法（普通のjQuery）において

Chromeの要素インスペクタを持つ要素を検査するときline-height性も追加/設定されておらず、テキストはデフォルトの垂直位置

のまま第2の方法は、同様にしてしまいます第一の方法（変更なし/要素のスタイルになりません）

console.log($(this).height());は（私の画面上）32pxの期待される結果を生成することに留意すべきである

誰かが私を助けるのいずれか修正できるかどうかは/素晴らしいだろう私の既存の方法を編集するか、私が使用した方法を提供する/いくつか文書化されているどこに。

ありがとうございます。

Answer 1

2番目の例のCSSはCSS変数のみを使用しますが、1つも宣言しません。 宣言つの第一のように：

 <style> 
      :host { 
       --dynamic-line-height: 1px; 
       .... 
       line-height: var(--dynamic-line-height); 
      } 
     </style> 

     ... 

      ready: function() { 
       var height = Polymer.dom(this).node.offsetHeight + 'px'; 
       this.customStyle['--dynamic-line-height'] = height; 
       this.updateStyles(); 
      } 

Plunker example

も参照してくださいChanging CSS variables via JS in Polymer