Polymer 1.x: Obtaining Customstyles Property Value

Here is my jsBin. The parent-element sets the value of the --custom-color property in the child-element. I want to get the value of that property from the JS in the child-element.

Solution 1:

The variable is overwritten by the parent, I don't think you can get the original out (default) value. This is how you get the value at the time of running this.getComputedStyleValue('--custom-color')

<h4>http://jsbin.com/kevanicebu/edit?html,console,output</h4><linkrel="import"href="https://rawgit.com/Polymer/polymer/master/polymer.html"><dom-moduleid="parent-element"><style>
    child-element {
      --custom-color: blue;
    }
  </style><template><child-element></child-element></template><script>Polymer({
      is: 'parent-element',
    });
  </script></dom-module><dom-moduleid="child-element"><style>h1 {
      color: var(--custom-color, green);
    }
  </style><template><h1on-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>