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

@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');

那种作品。它返回第一个color元素的p属性的当前值。

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

2 个答案: