Styling: host of Polymer Element с Javascript

Question

Я хочу, чтобы стиль :host{}, пользовательский элемент Полимер, с Javascript (динамически). Свойством, которое я хочу создать, является «высота строки», которая будет варьироваться в зависимости от размера экрана пользователя (текст всегда будет на одной строке).

В попытке найти 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> 

Второй метод, который я пытался использует пользовательские полимера 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) при осмотре элемента с Хрома Элемент инспектор свойство line-height даже не добавляется/набор, и текст остается в вертикальном положении по умолчанию

Второй способ заканчивается так же, как первый способ (без изменения/результат в стиле элемента)

следует отметить, что console.log($(this).height()); производит ожидаемый результат 32px (на моем экране)

было бы удивительным, если кто-то может мне помочь либо исправить/изменить любой из существующих методов или предоставить мне метод, который они использовали/документировали некоторые где.

Thank you.

Answer 1

Ваш CSS во втором примере использует только переменную CSS, но не объявляет ее. Объявить один первый как:

 <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