Polymer 1.x: Насколько важно (используя JS) получить значение пользовательского свойства CSS?

Question

В следующем примере у меня есть родительский пользовательский элемент, вызывающий дочерний пользовательский элемент. У ребенка есть переменная color Свойство CSS для p элементов, которые могут быть определены в родительском CSS.

В JS дочернего элемента я хочу прочитать значение --custom-color, выбранное в родительском элементе. В этом случае значение равно yellow. Иными словами: когда запускается метод getCustomColor(), я хочу, чтобы в консольном журнале было указано «Ваш пользовательский цвет - желтый».

Какой JavaScript я использую в методе getCustomColor() для определения ?

мой родителем-element.html

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

мой потомок-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. Но я не могу найти ссылку на то, что я описываю в этом вопросе.

Answer 1

Документах вы связаны на самом деле говорить об этом ...

Вам просто нужно проверить this.customStyle['--my-property-name'] и она будет иметь значение свойства

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.