javascript - 如何在共享样式的 Polymer 元素中修改 CSS 变量

Question

大家晚上好

我想知道是否可以修改 CSS 变量的值，以及此更改是否会立即对包含它的每个 polymer 元素生效。

这是我想动态更改的 CSS 变量的声明:

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
  <template>
    <style>
      :root {
        --apc: #099b34;
        --asc: #4CAF50; /*App Secondary Color*/
      }
    </style>
  </template>
</dom-module>

晚上好，谢谢

内托FR

编辑 1:我尝试了@d.mares 给出的第一种方法，但它不起作用。正如您在图片上看到的那样，它出现在 element.style 部分，但不会覆盖主机定义，也不会分布在其他元素上。

编辑 2:通过做一些研究，我设法得到一个错误，部分回答了我的问题: 所以.. 似乎它不是动态变化的。我需要找到另一种方法来做到这一点。

Answer 1

是的，你可以，你必须调用 this.updateStyles 并传递新值:

  this.updateStyles({
    '--apc': 'blue',
    '--as': 'red'
  });