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