我想要一些关于如何设置 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 往往会被破坏。
最佳答案
这是一种实现方法:
<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>
关于javascript - Polymer Elements ShadowDOM 子节点 - 动态设置样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38122206/