ポリマー1.x：どのように（JSを使用して）カスタムCSSプロパティの値を取得するにはどうすればいいですか？

Question

次の例では、子カスタム要素を呼び出す親カスタム要素があります。子は親CSSで定義できるp要素の変数color CSSプロパティを持っています。子要素のJSで

、私は親で選択--custom-color値を読むことをお勧めします。この場合、値はyellowです。別の言い方をすると、getCustomColor()メソッドを実行すると、コンソールログに「あなたのカスタム色は黄色です。」と表示されます。私はを定義するためにgetCustomColor()方法にはどのようなJavaScriptを

置けばいいの？

私の親-element.html FYI

<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> 

：This documentation describes the custom style API。しかし、私はこの質問で私が記述していることへの言及を見つけることができないようです。あなたが実際にリンクされ

Answer 1

ドキュメントは、あなただけのthis.customStyle['--my-property-name']をチェックする必要があり、それが@BryanDowningによってプロパティの値コメントパー

Answer 2

を持っています...

をそれを言及：

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

そのような作品。最初のp要素のcolorプロパティの現在の値を返します。