Question

我想了解如何动态设置font-size到<paper-textarea>的想法（即从JS而不是CSS设置font-size）。

font-size的文档中没有默认属性。
看起来它只能通过mixin设置（无法通过JS更改）。

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

<paper-textarea>
- ShadowDOM开始
- <div>
- <div>
- <div>
- <textarea>＆lt; - 这是实际的textarea

有没有办法通过JS在其shadowDOM中定位子节点并直接设置它的样式？

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

我将属性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更改时设置它的样式。

如何定位这些节点？

注意：如果存在，我更喜欢“官方”方式。聚合物规格经常变化，更新库时，脆弱的黑客会破坏。

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>

Answer 2

您可以在聚合物中使用纯JavaScript，只需编写

即可

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

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

2 个答案: