Mowzer Mowzer - 3 months ago 14
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

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

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

What JavaScript do I put in the
method to define
var yourColor


my-child-element {
--custom-color: yellow;


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

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.


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