为什么我的Polymer自定义CSS属性不起作用？

Question

我在Polymer中迈出了第一步,而且我坚持使用自定义CSS属性.

在my-itemelement中,我正在检查--my-item-color变量并将其指定red为默认值:

<dom-module id="my-item">
  <template>
    <style>
      :host {
        display: inline-block;
        padding: 5px;
      }

      .my-div {
        background-color: var(--my-item-color, red);
        display: block;
      }
    </style>
    <div class="my-div">
      <content></content>
    </div>
  </template>

  <script>
    Polymer({ is: "my-item" });
  </script>
</dom-module>

这些项目位于以下容器元素中,但不知何故所有项目都my-item保持红色.

<dom-module id="my-container">
  <template>
    <style>
      :host {
        --my-item-color: blue;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    </style>
    <content></content>
  </template>

  <script>
    Polymer({ is: "my-container" });
  </script>
</dom-module>

plunkr:http://plnkr.co/edit/LovSp4VRAGpLadcr87Wz

谁能告诉我我做错了什么？

Answer 1

您可以使用Polymer 1.6.0中的本机CSS属性来允许当前代码工作.确保在导入之前通过设置Polymer对象的useNativeCSSProperties属性来启用它polymer.html:

<script>
  Polymer = {
    lazyRegister: true,
    useNativeCSSProperties: true
  };
</script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../x-element.html">

plunker