Question

我正在尝试使用Polymer和自定义元素。试图做一个＆lt; H1＆GT;通过传递属性值在元素内部获得某种颜色。所以我的元素代码如下所示：

<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}};在样式标签内颜色：红色;它有效，但我显然不希望如此。那么属性值是不是传递给了样式？有关为什么会发生这种情况以及我应该在哪里寻找更多信息的任何提示？我已经阅读了一些博客，但没有找到任何具体信息。

感谢。： - ）

Answer 1

当可以绑定到style属性时，无法绑定到<style>代码，因为CSS填充对非{原生ShadowDOM。

它仍处于试验阶段，但请查看core-style。

Answer 2

我把你的代码放在JSBin上，看看它是如何工作的。看起来它在Firefox中将CSS缩小到页面的头部，因为我正在使用的版本（OSX上的VM中的24 - ＆gt;窗口）没有阴影dom支持，因此失败。

在OSX上的Chrome 35上，它保留了阴影dom和封装样式。

作为一种解决方法，请尝试以下

<h1 id="h1"> oioioi </h1>

Polymer('test-element', {
  nameColor: "blue",
  ready : function () {
    if (this.nameColor !== '') {
      this.$.h1.style.color = this.nameColor;
    }
  }
});

我知道，与此相同

<h1 style="color:{{nameColor}}"> oioioi </h1>

Answer 3

您可以更改：

<span style="color:{{nameColor}}">Robert</span>

到

<span style$="color:{{nameColor}};">Robert</span>

并从块中删除它，它应该可以工作。

//修改

您可能需要更改：

Polymer('test-element', {
  nameColor: "blue"
});

为：

Polymer('test-element', {
  properties:{
    nameColor: {
      type: String,
      value: "blue"
    }
  }
});

Answer 4

我在Chrome中测试了您的代码并且它可以正常运行但不幸的是它不适用于FireFox和Safari！

具有属性的HTML5 Polymer自定义元素样式

4 个答案: