Paper-dialog shows up behind drawer-panel when placed in a custom element

Question

The paper-dialog shows up behind drawer-panel when launched from a custom element.

Answer 1

I'm not sure exactly what your requirements are, but I was able to use your dialog element and display it above and not obscured by the panel by simply placing it outside of the <paper-drawer-panel>.

Here's what it looks like:

I'm not sure if this is what you want, but to do this, something like the following illustrates a basic example:

  <paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div>Drawer</div>
    </paper-toolbar>
    <paper-menu selected="{{_selected}}">
      <paper-item>Item 1</paper-item>
    </paper-menu>
  </paper-header-panel>
  <paper-header-panel mode="standard" main>
    <paper-toolbar>
      <h1>[[_selected]]</h1>
    </paper-toolbar>
    <neon-animated-pages selected="{{_selected}}">
      <paper-button raised on-tap="showDialog">Show Dialog</paper-button>
      <div>Div</div>
    </neon-animated-pages>
  </paper-header-panel>
</paper-drawer-panel>
<my-greeting id="dialog"></my-greeting>