Showing a gray backdrop with a mixin

问题:

I have a small window that I'm inserting into my page (and removing when the page is closed). I want a grayed-out background behind this window, as on dialogs. So I thought I'd use paper-dialog-behavior or iron-overlay-behavior as a mixin, and set this.withBackdrop = true in my ready() method. However, when I add ...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) or ...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element) to this element, it never appears.

I tired .open() like on a dialog and was told that it's undefined. I can trace my element loading in DevTools, and no errors print in the console, but it never appears on the screen.

You can see what I'm going for at this pen: https://codepen.io/johnthad/pen/zRLMpe If I swap the class declarations of MyChild for the one with the mixin, the child loads but never displays.

回答1:

You need to call open of MyChild after append:

_doTap(e) {
   . . .
   this.$.placeholder.appendChild(this.mychild);
   this.mychild.open()
}

Then add withBackdrop property to true in MyChild component:

static get properties() {
     return {
         withBackdrop: {
          type: Boolean,
          value: true
        }
     }
}

Here you'll find working code.