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.

Here is the documentation but I can not find it mentioned anywhere in there how to do this.

Please provide a working example (jsBin) with your answer.

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

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

来源：https://stackoverflow.com/questions/38319721/polymer-1-x-obtaining-customstyles-property-value

标签

javascript

css

polymer

polymer-1.0

custom-element