Css 通过自定义属性动态更改元素样式？

例如，您可以通过更改

--paper-tab-ink:var（--重音颜色）来更改
纸张选项卡中的
墨水
颜色。是否可以动态更改CSS自定义属性的值，类似于在JS中切换类或更改样式的方式？
有不同的方法可以做到这一点，但一个简单的答案是在更改类后使用Polymer.updateStyles（）方法

例如，假设您的样式是：

<style>
.yellow x-example {
  --light-primary-color: #fdd85f;
}
.red x-example {
  --light-primary-color: red;
}
</style>


.黄色x-示例{
--浅色原色：#fdd85f；
}
.红色x-示例{
--浅色原色：红色；
}

您希望使组件使用.red类中的样式。您只需像通常在javascript中那样添加它，然后确保也使用此函数在页面上实际更新它

<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()">
  <x-example></x-example>
</div>

是，首先获取自定义元素的对象。然后获取customStyle对象。向该对象添加样式。然后运行element.updateStyles（）

看

       t.clickListener= function(e) {
           var t = Polymer.dom(e).localTarget; //retarget if needed
           t.customStyle['--the-color-etc'] = 'pink';
           t.updateStyles(); // mandatory for the CSS variables shim
       };