ポリマー1.x：customStylesプロパティ値の取得

Question

Here is my jsBin。

parent-elementはchild-elementの--custom-colorプロパティの値を設定します。私はchild-elementのJSからそのプロパティの価値を得たいと思っています。

Here is the documentationしかし、私はそれをどこにどのようにこれを行うに記載され見つけることができません。

答えを実際の例（jsBin）にしてください。

<h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4> 
 
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> 
 

 
<dom-module id="parent-element"> 
 
    <style> 
 
    child-element { 
 
     --custom-color: blue; 
 
    } 
 
    </style> 
 
    <template> 
 
    <child-element></child-element> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'parent-element', 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="child-element"> 
 
    <style> 
 
    h1 { 
 
     color: var(--custom-color, green); 
 
    } 
 
    </style> 
 
    <template> 
 
    <h1 on-tap="showColor">Click Me</h1> 
 
    <p>I want the console to log the <code>--custom-color</code> property (i.e., "blue") when the user clicks above.</p> 
 
    <p>Right now, it reads: "undefined."</p> 
 
    <p>What changes do I make to the <code>showColor()</code> method?</p> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'child-element', 
 
     showColor: function() { 
 
     // What do I need to change in the below line of code? 
 
     console.log(this.customStyle['--custom-color']); 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<parent-element></parent-element>

Answer 1

変数は親によって上書きされて、私はあなたが（デフォルト）値を、元を出すことができるとは思いません。これはthis.getComputedStyleValue('--custom-color')

<h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4> 
 
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> 
 

 
<dom-module id="parent-element"> 
 
    <style> 
 
    child-element { 
 
     --custom-color: blue; 
 
    } 
 
    </style> 
 
    <template> 
 
    <child-element></child-element> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'parent-element', 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<dom-module id="child-element"> 
 
    <style> 
 
    h1 { 
 
     color: var(--custom-color, green); 
 
    } 
 
    </style> 
 
    <template> 
 
    <h1 on-tap="showColor">Click Me</h1> 
 
    <p>I want the console to log the <code>--custom-color</code> property (i.e., "blue") when the user clicks above.</p> 
 
    <p>Right now, it reads: "undefined."</p> 
 
    <p>What changes do I make to the <code>showColor()</code> method?</p> 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'child-element', 
 
     showColor: function() { 
 
     // What do I need to change in the below line of code? 
 
     console.log(this.getComputedStyleValue('--custom-color')); 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<parent-element></parent-element>