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

Question

我正在迈出使用 Polymer 的第一步，但我仍然停留在自定义 CSS 属性上。

在 my-item 元素中，我正在检查 --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

您可以使用 native CSS properties from Polymer 1.6.0 让您当前的代码正常工作。确保在导入 polymer.html:

之前通过设置 Polymer 对象的 useNativeCSSProperties 属性 来启用它

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

plunker