Sonaryr Sonaryr - 11 days ago 9
CSS Question

Why is my Polymer custom CSS property not working?

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

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