polymer - 我应该如何设置 ``的背景颜色

Question

我有一个自定义元素，我想在等待 ajax 请求完成时使用它。它由 <paper-spinner> 组成。 ，但它还有 Polymer.IronOverlayBehavior 。行为。它由 waiting 驱动属性，我在它上面有一个观察者，所以当它设置时，覆盖层会打开。

从操作上来说，这工作得很好。只是背景颜色不适合我的网站。

我正在尝试根据模板中的文档设置叠加层的样式

<style >
  :host{
    --iron-overlay-backdrop-background-color: #fff;
  }
</style>

但我得到的只是默认的黑色样式，而不是我尝试设置的白色。

我应该如何设置样式才能得到半透明的白色，而不是我现在得到的半透明的黑色。

Answer 1

带有 iron-overlay-backdrop 的东西它是一个单例，不附加到元素的本地 DOM，而是附加到主 DOM。

因此，要设置其自定义 css 属性或 mixins，您应该在适用于主 DOM 的 custom-style 上执行此操作，如下所示:

<style is="custom-style">
iron-overlay-backdrop {
  --iron-overlay-backdrop-background-color: #fff;
  --iron-overlay-backdrop-opacity: 0.9;
}
</style>

这是一个jsfiddle实际展示