Question

我无法理解如何在聚合物中使用自定义css变量。目前我正在使用＆＃34;铁叠加行为＆＃34;进行叠加。

这包括＆＃34;铁覆盖背景＆＃34;已定义各种css变量的元素。我感兴趣的主要是--iron-overlay-backdrop-opacity。

我可以通过添加

在我的主index.html文件中使用它们

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

但我不想在那里定义款式！我想在我的自定义overlay元素中定义它们。

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

我试过像这样使用它们

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

<style>

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

但这并不奏效。有没有办法做到这一点？

Answer 1

我相信你要找的是:(在你的主题文件中）

<style is="custom-style">
  :root {
    --iron-overlay-backdrop-opacity: 0.7;
    --background-r: 0;
    --background-g: 0;
    --background-b: 255;
    --background-color: blue;
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
  }
 </style>

并在您的自定义元素

中

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

Answer 2

由于Safari中的一个错误，聚合物使用css变量的自定义实现（如Polymer所述）。

请参阅此处：https://www.polymer-project.org/1.0/docs/devguide/settings（位于页面底部）。

要使用浏览器实现，请将其告诉Polymer：

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

使用聚合物css变量

2 个答案: