javascript - 在 Polymer 2.0 中动态更改样式

Question

我正在编写一个概念验证 Polymer 2.0 Web 组件，我想根据用户输入更改一段文本的颜色。

我尝试过使用 Polymer 2.0 的 this.updateStyles({...}) 和 Polymer.updateStyles({...}) 但都没有更新输出的文本。

例如

Polymer.updateStyles({'--tool-colour': 'green'});

我写了一个 plunker 来演示这个问题 here .

我可能错过了一些简单的事情，有人可以帮助我吗？

Answer 1

我自己是这样做的:

<template>
    <style>
        .green-icon {
            color: var(--green-color);
        }
        .red-icon {
            color: var(--red-color);
        }
    </style>
    <my-element class$="[[computeIconColor(boolProp)]]"></my-element>
</template>

然后在脚本中:

computeIconColor(boolProp) {
    if (!!boolProp) return 'green-icon';
    return 'red-icon';
}