Polymer 1.x：如何强制性地（使用JS）获得自定义CSS属性的值？

Question

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 1

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

Answer 2

Per comment by @BryanDowning:

var s = document.querySelector('p');
var yourColor = window.getComputedStyle(s).getPropertyValue('color');
// Using Polymer syntax, the above line could be written as follows:
var yourColor = s.getComputedStyleValue('color');

That sort of works. It returns the current value of the color property of the first p element.