我正在尝试Polymer和自定义元素。试图通过传递属性值来使元素内的<h1>具有某种颜色。所以我的元素代码看起来像这样:
<polymer-element name="test-element" attributes="nameColor">
<template>
Hello! My name is <span style="color:{{nameColor}}">Robert</span>
<h1> oioioi </h1>
<style>
h1 {
color:{{nameColor}};
}
</style>
</template>
<script>
Polymer('test-element', {
nameColor: "blue"
});
</script>
</polymer-element>
所以,然后我使用像这样的元素:
<test-element nameColor="red"></test-element>
问题是,我的名字(罗伯特)现在是红色。哪个好 但是h1元素不是红色。为什么不?如果我更改颜色:{{nameColor}}; 在样式标签内将其颜色变为:red; 它有效,但我显然不希望如此。那么属性值不会传递给样式吗?关于为什么会发生这种情况以及我应该在哪里寻找更多信息的任何提示?我已经阅读了一些博客,但是没有找到任何具体的信息。
谢谢。:-)
虽然可以绑定到style
属性,但是由于CSS填充在非本机ShadowDOM上的工作方式,因此无法绑定到<style>
标签。
它仍处于实验阶段,请看一下core-style。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句