I have a custom element that I want to use when I am waiting for ajax requests to complete. It consists of a <paper-spinner>, but it also has the Polymer.IronOverlayBehavior .behavior. It is driven by a waiting property, on which I have an observer, so when it's set, the overlay opens.
Operationally this is working fine. Just the background color is wrong for my site.
I am attempting to style the overlay as per the docs with the following in my template
<style > :host{ --iron-overlay-backdrop-background-color: #fff; } </style> But all I get is the default style of black, rather than the white I am attempting to set.
How should I set the style so that I get a semi transparent white, rather than the semi transparent black that I am getting at the moment.
1 Answer
The thing with iron-overlay-backdrop is that it's a singleton that's not appended to an element's local DOM but to the main DOM.
So to set its custom css properties or mixins you should do it on a custom-style tha applies to the main DOM like this:
<style is="custom-style"> iron-overlay-backdrop { --iron-overlay-backdrop-background-color: #fff; --iron-overlay-backdrop-opacity: 0.9; } </style> Here's a jsfiddle showing it in action
1
