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

我在Polymer上迈出了第一步，我被自定义CSS属性所困扰

在

my item

元素中，我正在检查

--my item color

变量，并将

红色

指定为默认值：

<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>

普朗克：

有人能告诉我我做错了什么吗？

您可以使用允许当前代码工作。在导入

Polymer.html

之前，请确保通过设置

Polymer

对象的

UseNativeCSProperties

属性来启用它：

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

聚合物={
懒汉：没错，
UseNativeCSProperties:true
};

您可以使用允许当前代码工作。在导入

Polymer.html

之前，请确保通过设置

Polymer

对象的

UseNativeCSProperties

属性来启用它：

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

聚合物={
懒汉：没错，
UseNativeCSProperties:true
};

---

这解决了这个问题，但仍然想知道为什么聚合物本身不支持它tho@AdrianoSpadoni它在shadowdom（）中也能工作。@tony19它在一个真正边缘的情况下失败了，一个组件（我没有写）在shadowdom中向主体添加了一个元素，css将不会被考虑，因为现在它脱离了阴影。。。问题出现在第三方组件中。我的评论是在我发现问题之前写的。你是对的，它在shadowdom上工作。这解决了这个问题，仍然想知道为什么它本身不受支持tho@AdrianoSpadoni它也适用于shadowdom（）。@tony19在真正边缘的情况下失败了，一个组件（我没有写）在shadowdom中向主体添加元素，css将不会被考虑，因为现在它已脱离阴影。。。问题出现在第三方组件中。我的评论是在我发现问题之前写的。你是对的，它在阴影dom上工作。