Styling: Gastgeber von Polymer-Element mit Javascript

Question

Ich möchte die :host{}, von einem benutzerdefinierten Polymer-Element, mit Javascript (dynamisch). Die Eigenschaft, die ich stylen möchte, ist die "Zeilenhöhe", die abhängig von der Bildschirmgröße des Benutzers variiert (der Text wird immer in einer Zeile sein).

In einem Versuch, ein sulotion ich zwei verschiedene Methoden verwendet habe, zu finden:
Die erste ist mit normaler 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> 

Die zweite Methode, die ich versucht wird Polymer des Brauch mit css Eigenschaften:

<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> 

Bei dem ersten Verfahren (plain jquery), wenn das Element mit Chrome Elemente Inspektoren der line-height wird/set nicht einmal hinzugefügt Eigenschaft Inspizieren und der Text bleibt an dem Standard vertikalen Position

Die zweite Methode nach oben endet das gleiche wie die erste Methode (keine Änderung/Ergebnis im Stil des Elements)

Es soll beachtet werden, dass console.log($(this).height()); das erwartete Ergebnis von 32px (auf meinem Bildschirm) erzeugt

Es wäre genial, wenn mir jemand helfen kann entweder fix/Bearbeiten Sie eine meiner vorhandenen Methoden oder stellen Sie mir eine Methode zur Verfügung, die sie benutzt/dokumentiert haben woher.

Vielen Dank.

Answer 1

Ihr CSS im zweiten Beispiel verwendet nur eine CSS-Variable, deklariert jedoch keine. Deklarieren eine erste wie:

 <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

Siehe auch Changing CSS variables via JS in Polymer