javascript - polymer 1.x : Obtaining customStyles property value

Question

Here is my jsBin .

父元素 设置子元素 中--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>