Question

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

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

e.g。

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

我写过一个能说明问题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

“问题”就是Jordan Running声明你的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 Running评论的那样，问题是由于缺少依赖性。我在一个在线编辑器（Plunker）中编写了代码，假设我需要的所有聚合物工作都是对'webcomponents-loader.js'的引用，并链接到我的定制组件正在使用的其他Web组件（doh！）。 / p>

为了让我的Polymer元素工作，我使用了Polymer团队提供的Polymer CLI工具（特别是我用this创建了一个Polymer元素模板项目）。

当我使用时：

polymer serve

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

在Polymer 2.0中动态更改样式

3 个答案: