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之前设置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

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

1 个答案: