在 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';
}

Answer 2

"problem" 正如 Jordan 运行所述，您的 webcomponentsjs 未加载。

真正的事情是你不能在没有 webcomponentsjs 的情况下使用 updateStyles，这很不幸，因为在某些情况下你可能根本不需要它。

在这种情况下你可以这样做 this.setAttribute('style', '--tool-colour: red'); 但话又说回来，这在需要 webcomponentsjs 的浏览器中不起作用。

我最终所做的是创建一个行为，该行为使用 setAttributes（合并样式）或 updateStyles，具体取决于可用的内容。它的代码看起来像这样。

if (!window.ShadyCSS || (window.ShadyCSS && window.ShadyCSS.nativeCss === true)) {
    var newStyleString = '';
    for (var key in newStyle) {
        if (newStyle.hasOwnProperty(key)) {
            newStyleString += key + ': ' + newStyle[key] + ';';
        }
    }
    this.setAttribute('style', newStyleString);
} else {
    ShadyCSS.styleSubtree(this, newStyle);
}

所以对于用法我只写 this.updateStyles({'--tool-colour': 'green'}); 因为我的行为会覆盖 updateStyles.

您可以在此处找到完整代码 https://github.com/daKmoR/grain-update-inline-style-behavior。它有点多，因为它还增加了对 IE11 上的内联样式的支持。

Answer 3

正如 Jordan 运行评论的那样，问题是由于缺少依赖项造成的。我在在线编辑器 (Plunker) 中编写了代码，假设我需要让 polymer 工作的只是对 'webcomponents-loader.js' 的引用和指向我的定制组件正在使用的其他 Web 组件的链接（doh！）。

为了让我的 Polymer 元素正常工作，我使用 Polymer CLI facility provided by the Polymer team (specifically I used this 创建了一个 Polymer 元素模板项目）。

当我当时使用：

polymer serve

到运行一个本地网络服务器到“serve”正在使用我的 Polymer 元素的应用程序，然后依赖关系得到正确解析并且元素工作。

在 Polymer 2.0 中动态改变样式

Dynamically changing a style in Polymer 2.0

javascript

css

web-component

polymer

polymer-2.x