Why is my Polymer custom CSS property not working? - css

Question

I'm taking my first steps in Polymer, and I'm stuck on custom CSS properties.
In my-item element, I am checking for the --my-item-color variable and assigning red as a default value:
<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>
These items are in the following container element, but somehow all my-items remain red.
<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
Can anyone tell me what I am doing wrong?

Answer 1

You could use native CSS properties from Polymer 1.6.0 to allow your current code to work. Make sure to enable it by setting up your Polymer object's useNativeCSSProperties property before importing polymer.html:
<script>
Polymer = {
lazyRegister: true,
useNativeCSSProperties: true
};
</script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../x-element.html">
plunker