Question

我有一个very basic example，我想在点击铁图标时更改它的颜色。

我使用铁选择器进行攻击：

<template>

<style>

  :host {
    display: block;
    padding: 10px;
    --iron-icon-fill-color: blue;
  };

  .iron-selected iron-icon {
    --iron-icon-fill-color: red;
  };

  .iron-selected iron-icon {
    fill: purple;
  }

</style>

<iron-meta id=meta key="info" value="some"></iron-meta>

<iron-meta id=meta key="sub">
  <a href="some"></a>
</iron-meta>

<iron-selector id="one" selected="0">
  <div><iron-icon icon="android" class="ico"></iron-icon></div>
  <div><iron-icon icon="menu" class="ico"></iron-icon></div>
</iron-selector>


</template>

之前我被告知这是垫片的限制，每个元素范围只能保留一个自定义值。

写一个＆＃34;直＆＃34;选择器（参见＆＃34中的变化;粉红色＆＃34;）实际上有效。

现在......如果我想使用组件（--iron-icon-fill-color）提供的变量而不是直接操作CSS，我还需要编写什么？（或者，它实际上是不可能的吗？）

Answer 1

更新：新发布的Polymer 1.6.0支持原生CSS属性（无填充），因此您的代码无法使用updateStyles()。

要启用原生CSS属性，请在导入Polymer之前初始化polymer.html变量：

<script>Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

  <!-- Enable native CSS properties (instead of shim) -->
  <script>Polymer = {lazyRegister: true, useNativeCSSProperties: true};</script>
  <link rel="import" href="polymer/polymer.html">

  <link rel="import" href="iron-selector/iron-selector.html">
  <link rel="import" href="iron-icons/iron-icons.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        :host{
         --iron-icon-fill-color: blue;
        }
        .iron-selected {
          background: #eee;
        }
        .iron-selected iron-icon {
          --iron-icon-fill-color: pink;
        }
      </style>

      <iron-selector selected="0">
        <div>
          <iron-icon icon="android" class="ico"></iron-icon>
        </div>
        <div>
          <iron-icon icon="menu" class="ico"></iron-icon>
        </div>
      </iron-selector>
    </template>
  </dom-module>
</body>

codepen

来自Polymer 1.5.0 docs（强调我的）：

Polymer的自定义属性填充程序在元素创建时评估并应用自定义属性值一次。

由于您正在动态地使用自定义属性更新样式（即，在元素创建之后），因此必须通过调用updateStyles()来重新应用自定义属性。您可以收听<iron-selector>的{{3}}事件来触发此更新。

// template
<iron-selector on-iron-select="_updateStyles">

// script
Polymer({
  ...
  _updateStyles: function() {
    this.updateStyles();
  }
});

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    _updateStyles: function() {
      this.updateStyles();
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-selector/iron-selector.html">
  <link rel="import" href="iron-icons/iron-icons.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        :host{
         --iron-icon-fill-color: blue;
        }
        .iron-selected {
          background: #eee;
        }
        .iron-selected iron-icon {
          --iron-icon-fill-color: pink;
        }
      </style>

      <iron-selector selected="0" on-iron-select="_updateStyles">
        <div>
          <iron-icon icon="android" class="ico"></iron-icon>
        </div>
        <div>
          <iron-icon icon="menu" class="ico"></iron-icon>
        </div>
      </iron-selector>
    </template>
  </dom-module>
</body>

iron-select

Answer 2

试试这个

<iron-icon on-tap='updateColor'></iron-icon>

和js

updateColor:function(){
 this.customStyle['--iron-icon-fill-color']='blue';
 this.updateStyles();
}

您可以详细了解here。

这可能会改变iron-icons中所有dom的颜色，因此我建议为要更改颜色的图标指定一个新变量，然后更改其值而不是{{1 }}

--iron-icon-fill-color

点击时更改彩色铁图标

2 个答案: