`<iron-overlay-backdrop>の背景色を設定するにはどうすればいいですか

Question

ajaxリクエストが完了するのを待っているときに使用したいカスタム要素があります。 <paper-spinner>で構成されていますが、Polymer.IronOverlayBehavior .behaviorもあります。それは私がオブザーバーを持っているwaitingプロパティによって駆動されるので、それが設定されるとオーバーレイが開きます。

これは正常に動作しています。私のサイトで背景色だけが間違っています。

私は

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

私のテンプレートでは、次のとドキュメントごとにオーバーレイのスタイルしようとしています。しかし、私が得るすべては黒のデフォルトのスタイルではなく、私が設定しようとしています白です。

私は現時点で入手している半透明の黒ではなく、半透明の白を得るようにスタイルを設定する必要があります。

Answer 1

iron-overlay-backdropのものは、それが要素のローカルDOMではなくメインDOMに追加されるシングルトンだということです。

したがって、このようなメインDOMに適用されますが、custom-style股関節にそれを行う必要があり、そのカスタムCSSプロパティやミックスインを設定するには：ここでは

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

jsfiddleは、アクション

でそれを示しています