Mowzer Mowzer - 4 months ago 20
Javascript Question

Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

In the following example, I have a parent custom element calling a child custom element. The child has a variable

color
CSS property for
p
elements that can be defined in the parent CSS.

In the JS of the child element, I want to read the
--custom-color
value selected at the parent. In this case, the value is
yellow
. Put another way: when the
getCustomColor()
method is run, I want the console log to read "Your custom color is yellow."

What JavaScript do I put in the
getCustomColor()
method to define
var yourColor
?

my-parent-element.html

<style>
my-child-element {
--custom-color: yellow;
}
</style>
<template>
<my-child-element></my-child-element>
</template>


my-child-element.html

<style>
p {
color: var(--custom-color);
}
</style>
<script>
getCustomColor: function() {
var yourColor = // What goes here to obtain the correct value of 'yellow'?
console.log('Your custom color is' + yourColor);
}
</script>


FYI: This documentation describes the custom style API. But I can't seem to find the reference to what I'm describing in this question.

Answer

The docs you linked actually mention it...

You just need to check this.customStyle['--my-property-name'] and it will have the value of the property

Comments