爲什麼我的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