Polymer 使用聚合物css变量

我不知道如何在polymer中使用自定义css变量。目前，我正在制作一个覆盖“铁覆盖行为”

这包括定义了各种css变量的“iron overlay Background”元素。我主要感兴趣的是——铁覆盖层

我可以通过添加

  <style is="custom-style">
    :root {
      --iron-overlay-backdrop-opacity: 0.4;
    }
 </style>

：根{
--铁覆盖背景不透明度：0.4；
}

但我不想在那里定义样式！我想在自定义覆盖元素中定义它们

如何在自定义元素中使用这些元素

我试过这样使用它们

<dom-module id="faq-overlay">

<style>

:host {
  --iron-overlay-backdrop-opacity: 0.3;
  --iron-overlay-backdrop-background-color: red;
}
...

：主持人{
--铁覆盖背景不透明度：0.3；
--铁覆盖背景色：红色；
}
...

---

但这不起作用。有什么方法可以做到这一点吗？

我相信您正在寻找的是：（在您的主题文件中）

：根{
--铁覆盖背景不透明度：0.7；
--背景r:0；
--背景-g:0；
--背景-b:255；
--背景颜色：蓝色；
--铁覆盖背景颜色：rgba（var（--background-r）、var（--background-g）、var（--background-b）、var（--iron覆盖背景不透明度）；
}

在自定义元素中

<style is="custom-style">
    :host paper-material.custom {
       background-color: var(--iron-overlay-backdrop-background-color);
    }
</style>

：host paper-material.custom{
背景色：var（--铁覆盖背景色）；
}

由于Safari中的一个bug，Polymer使用css变量的自定义实现（如Polymer所述）

请看这里：（在页面底部）

要使用浏览器实现，请告诉它：

<script>
  window.Polymer = {
     useNativeCSSProperties: true
  };
</script>

窗口聚合物={
UseNativeCSProperties:true
};

感谢主题文件的提示。。。通过创建一个“faq style.html”文件，我已经按照我想要的方式完成了这项工作。。。在其中使用标记，然后将其导入到我的自定义元素。。。谢谢

<script>
  window.Polymer = {
     useNativeCSSProperties: true
  };
</script>