Polymer 1.x: Wie kann man (mithilfe von JS) den Wert einer benutzerdefinierten CSS-Eigenschaft erhalten?

Question

Im folgenden Beispiel habe ich ein übergeordnetes benutzerdefiniertes Element, das ein untergeordnetes benutzerdefiniertes Element aufruft. Das untergeordnete Element hat eine Variable color CSS-Eigenschaft für Elemente, die in dem übergeordneten CSS definiert werden können.

Im JS des untergeordneten Elements möchte ich den Wert --custom-color lesen, der am übergeordneten Element ausgewählt wurde. In diesem Fall lautet der Wert yellow. Anders ausgedrückt: Wenn die Methode getCustomColor() ausgeführt wird, möchte ich, dass das Konsolenprotokoll "Ihre benutzerdefinierte Farbe ist gelb" anzeigt.

Welches JavaScript setze ich in die getCustomColor() Methode ein, um zu definieren?

my-Eltern-element.html

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

my-Kind-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. Aber ich kann nicht den Bezug zu dem finden, was ich in dieser Frage beschreibe.

Answer 1

Die docs Sie es tatsächlich verknüpft erwähnen ...

Sie müssen nur this.customStyle['--my-property-name'] überprüfen, und es wird von @BryanDowning den Wert der Immobilie

Answer 2

Pro Kommentar haben:

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

Diese Art von Arbeiten. Es gibt den aktuellen Wert der color Eigenschaft des ersten p Elements zurück.