css - 为什么我的 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