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

Question

我正在迈出聚合物的第一步，而我被困在自定义的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 S保持存储红色。

<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