javascript - Polymer Elements ShadowDOM 子节点 - 动态设置样式属性

Question

我想要一些关于如何设置 font-size 的想法到 <paper-textarea> ，动态地(即从 JS 而不是 CSS 设置 font-size)。

• 文档中没有 font-size 的默认属性。
• 看起来只能通过 mixin 设置(不能通过 JS 更改)。

例如，<paper-textarea>的 DOM 树看起来像这样:

• <paper-textarea>
  • ShadowDOM 开始
  • <div>
  • <div>
  • <div>
  • <textarea> <-- 这是实际的文本区域

Is there any way to target the child-node in it's shadowDOM via JS and set it's style directly?

一个例子，这当然不起作用。

• 我绑定(bind)属性 fontSize到<paper-textarea>
• 因为没有属性 fontSize为这个特定元素设置，它不起作用。

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

理想情况下，我会设置一个 fontSize观察者并强制瞄准 <paper-textarea>的子节点设置其样式，当 fontSize变化。

如何定位这些节点？

注意:我更喜欢“官方”方式(如果存在)。 Polymer 规范经常变化，更新库时脆弱的 hack 往往会被破坏。

Answer 1

这是一种实现方法:

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

动态样式目前是 Polymer 的一个问题，根据建议，updateStyles 是它起作用的唯一方法。

这是基于您的示例的工作片段:

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