Polymer paper-dialog-backdrop child's opacity?

Question

<style is="custom-style">
  iron-overlay-backdrop {
    --iron-overlay-backdrop-opacity: 0.7;
    --iron-overlay-backdrop-background-color: black;
  }
</style>

This method set the overlay's opacity and all their childs. And if I want to set childs' opacity? I want 1 to (child) dialog's opacity

.dialog {
  opacity: 1;
}

related question

Answer 1

I'm not sure I understand your question, but let me try this: If you wish to style the overlay for a particular dialog, you do so on the body of the page that holds the paper-dialog, as you can see in this pen. The CSS used is

body {
  --iron-overlay-backdrop-opacity: 1.0;
  --iron-overlay-backdrop-background-color: red;
}

While the paper-button and the paper-dialog are in another custom element, this approach works if both elements are instead in a plain HTML page. Look at how I'm handling a general error dialog in my app. If I put the CSS above on that page, it would work like the pen.