我该如何设置`<iron-overlay-backdrop>`的背景颜色

Question

我有一个自定义元素,我想在等待ajax请求完成时使用.它由a组成<paper-spinner>,但它也有Polymer.IronOverlayBehavior.behavior.它由一个waiting属性驱动,我有一个观察者,所以当它设置时,叠加打开.

在操作上这很好.只是我的网站的背景颜色是错误的.

我正在尝试根据文档设置叠加层样式,并在模板中使用以下内容

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

但我得到的只是黑色的默认样式,而不是我试图设置的白色.

我应该如何设置样式,以便我得到一个半透明的白色,而不是我目前得到的半透明黑色.

Answer 1

事情iron-overlay-backdrop是,它是一个单独的,不会附加到元素的本地DOM,而是附加到主DOM.

因此,要设置其自定义css属性或mixins,您应该将其custom-style应用于主DOM,如下所示:

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

这是一个jsfiddle显示它在行动