动态改变聚合物2.0中的风格

我在写一个概念证明Polymer 2.0 web组件，我想根据用户输入更改一段文本的颜色。动态改变聚合物2.0中的风格

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

例如

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

我已经写了一个plunker，它演示了问题here。

我可能错过了一些简单的东西，有人可以帮我吗？

来源

2017-06-29 Ben Smith

如果你打开控制台，你会看到几个404错误的shadycss组件。我猜这与它有关。 –

不错的地方。可能是因为我刚刚添加到Polymer网站上的基本Plunker示例中，导致问题得以解决。我将不得不在本地环境中尝试这个例子，在这个环境中，bower会希望确保依赖被加载（这与Plunker中的情况不同，正如你指出的那样）。我会尝试更新这个答案。 –

由于Jordan Running评论，问题是由于缺少依赖关系。我在一个在线编辑器（Plunker）编写代码，假设我需要的所有聚合物工作都是对'webcomponents-loader.js'的引用，并且链接到我的定制组件使用的其他Web组件（doh！）。

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

当我再使用：

polymer serve

要运行一个本地网络服务器为“serve”，这是用我的聚合物元件的应用，依赖则得到妥善解决和元素的工作。

来源

2017-07-04 13:26:40

我做这样的自己：

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

来源

2017-06-29 19:20:59 codeMonkey

本例使用Polymer 1.0框架，而不是2.0。 –

这不是聚合物2.0吗？ – codeMonkey

我的错误codeMonkey，使用美元语法在聚合物2中是有效的。虽然这工作，我仍然想要updateStyles方法工作。 –

“问题”是乔丹跑步指出，您的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的内联样式的支持。

来源

2017-07-03 20:26:02 daKmoR

虽然这个工作，我想逐字使用Polymer 2.0库，而不必使用诸如使用setAttribute这样的技巧。尽管如此，这仍然是一个很好的方法。 –

动态改变聚合物2.0中的风格

回答

相关问题