Polymerelemente ShadowDOM Kindknoten - Stilattribute dynamisch setzen

Question

Ich hätte gerne einige Ideen, wie man einen font-size dynamisch auf einen setzt (d. H. font-size von JS anstelle von CSS).

• In der Dokumentation gibt es kein Standardattribut für die Schriftgröße.
• Es sieht so aus, als ob es nur über ein Mixin gesetzt werden kann (welches nicht über JS geändert werden kann).

Zum Beispiel <paper-textarea> ‚s DOM-Baum sieht wie folgt aus:

• <paper-textarea>
  • ShadowDOM beginnt
  • <div>
  • <div>
  • <div>
  • <textarea> < - Dies ist der eigentliche Textarea

Gibt es eine Möglichkeit, das Kind-Knoten zum Ziel darin shadowDOM über JS ist und setzen Sie es Stil ist direkt?

Ein Beispiel, das natürlich nicht funktioniert.

• I Eigenschaft binden fontSize zum <paper-textarea>
• Da es fontSize kein Attribut ist für dieses bestimmte Element zu setzen, funktioniert es nicht.

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-input/paper-textarea.html" rel="import"> 
 
<link href="paper-button/paper-button.html" rel="import"> 
 

 
<dom-module id="x-example"> 
 
    <style> 
 
    :host { 
 
     display: block; 
 
     max-width: 320px; 
 
    } 
 
    </style> 
 
    <template> 
 
     <paper-textarea label="Textarea" value="{{inputData}}" font-size="{{fontSize}}"></paper-textarea> 
 
    <paper-button class="primary" on-tap="incrementFontSize">Increment Font Size</paper-button> 
 
    </template> 
 
<script> 
 
    HTMLImports.whenReady(function() { 
 
    "use strict"; 
 

 
    Polymer({ 
 

 
     is: "x-example", 
 
     properties: { 
 
     \t inputData: { 
 
      type: String, 
 
      value: "Hello World" 
 
     }, 
 
     
 
     fontSize: { 
 
      type: Number, 
 
      value: 16 
 
     } 
 
     }, 
 
     
 
     incrementFontSize: function() { 
 
     this.set("fontSize", this.fontSize + 4); 
 
     } 
 

 
    }); 
 
    }); 
 
</script> 
 

 
</dom-module> 
 

 
<x-example></x-example>

Idealerweise würde ich einen fontSize Beobachter einrichten und imperativ die <paper-textarea> ‚s Child-Knoten Ziel es ist gesetzt Stil, wenn fontSize Änderungen.

Wie kann ich diese Knoten zielen?

Hinweis: Ich würde einen "offiziellen" Weg bevorzugen, wenn es existiert. Die Polymer-Spezifikation ändert sich oft und schwache Hacks neigen dazu, beim Aktualisieren der Bibliothek zu brechen.

Answer 1

Hier ist eine Möglichkeit, es zu tun:

<dom-module id="dynamic-style"> 
<template> 
    <style> 
    :host{ 
    --myfont:10px; 
    } 
    paper-textarea{ 
    --paper-input-container-input:{ 
    font-size:var(--my-font); 
    }; 
} 
</style> 
<paper-textarea on-tap="updateStyle"></paper-textarea> 
</template> 
</dom-module> 
<script> 
Polymer({ 
    is:"dynamic-style", 
    properties:{ 
    fontSize:{ 
    type:Number, 
    value:10 
    } 
    }, 
    updateStyle:function(){ 
    var style={'--my-font':this.computeFont()+'px'} 
    this.updateStyles(style); 
    }, 
    computeFont:function(){ 
    return this.fontSize+=4; 
    } 
}) 
</script> 

dynamischer Styling ist zur Zeit ein Problem mit Polymer und gemäß Empfehlung updateStyles ist die einzige Methode, durch die es funktioniert.

Und hier ist ein Arbeits Schnipsel basierend auf Ihrem Beispiel:

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link href="paper-input/paper-textarea.html" rel="import"> 
 
<link href="paper-button/paper-button.html" rel="import"> 
 

 
<dom-module id="x-example"> 
 
    <style is="custom-style"> 
 
    :host { 
 
     display: block; 
 
     max-width: 320px; 
 
    } 
 
    :root { 
 
     --font-size: 12px; 
 
     --paper-input-container-input: { 
 
     font-size: var(--font-size); 
 
     } 
 
    } 
 
    </style> 
 
    <template> 
 
    <paper-textarea label="Textarea" value="{{inputData}}"></paper-textarea> 
 
    <paper-button class="primary" on-tap="incrementFontSize">Increment Font Size</paper-button> 
 
    </template> 
 
    <script> 
 
    HTMLImports.whenReady(function() { 
 
     "use strict"; 
 

 
     Polymer({ 
 

 
     is: "x-example", 
 
     properties: { 
 
      inputData: { 
 
      type: String, 
 
      value: "Hello World" 
 
      }, 
 

 
      fontSize: { 
 
      type: Number, 
 
      value: 16 
 
      } 
 
     }, 
 

 
     incrementFontSize: function() { 
 
      var style = { 
 
      '--font-size': this.computeFont() + 'px' 
 
      } 
 
      this.updateStyles(style); 
 
     }, 
 

 
     computeFont: function() { 
 
      return this.fontSize += 4; 
 
     } 
 

 
     }); 
 
    }); 
 
    </script> 
 

 
</dom-module> 
 

 
<x-example></x-example>

Answer 2

Sie schlicht Javascript in Ihrem Polymer verwenden kann, einfach schreiben

this.style.fontSize = Number(this.fontSize + 4)+"px"