动态更改聚合物2.0中的样式

Question

我正在写一份概念验证聚合物2.0 Web组件，我想根据用户输入更改文本的颜色。

我已经尝试使用Polymer 2.0的This.upDatesty({...}(和Polymer.upDatestyles({...}(，但都没有更新输出的文本。

，例如

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

我已经写了一个在这里演示问题的plunker。

我可能缺少一些简单的东西，有人可以帮我吗？

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

"问题"是jordan运行指出您的webcomponentsjs没有加载。

真正的事情是，如果没有WebComponentsjs，您将无法使用updateStyles，这是不幸的，因为在某些情况下您可能根本不需要它。

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

我最终做的事情创造了一种行为，该行为要么根据可用的方式(与样式合并(或更新的行为。它看起来像这样。

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(中编写代码，假设我要使聚合物工作所需的只是引用" webcomponents-loader.js"，并且链接到我的定制组件正在使用的其他Web组件(doh！(。/p>

要获得我的聚合物元件的工作，我使用了聚合物团队提供的聚合物CLI功能(特别是我使用此功能来创建聚合物元件模板项目(。

然后使用：

polymer serve

运行本地网络服务器以"服务"使用我的聚合物元素的应用程序，然后这些依赖项得到了正确的解决，并且该元素可行。