can't restrict dialog to a parent element

We have a 'main' element that contains two elements separated by a core-splitter.

<!-- app-main.html -->
  <left-panel></left-panel>
  <core-splitter></core-splitter>
  <right-panel></right-panel>

The right hand element wants to display a paper-dialog element only within its contraints. When it displays the panel, it seems to become part of the whole element, something like this :

<!-- main.html -->
<body>
  <app-main></app-main>
  <core-overlay-layer>
    <overlay-host>
      <paper-dialog></paper-dialog>
    </overlay-host>
  </core-overlay-layer>
</body>

Unfortunately, I have a css rule body > * { display: none !important }, and exceptions for <app-main>. So I have to add <core-overlay-layer> to the exceptions just to be able to see it (after having figured out where it was!).

However, it still shows in the wrong place - ie positions relative to the top left of the body, when I want it relative to the top left of <right-panel>.

It seems (I wasn't the original author of this code) we already turned off the backdrop (well, I don't see it anyway - not in the body - but perhaps that's because of the css rule); and it was replaced by one that only covered the <right-panel>. Unfortunately, that doesn't move the dialog itself, and I'm left trying to position it manually, which just seems wrong.

Is there a solution to this problem? Is there no way to specify a 'target' element into which the dialog is constrained?

googlearchive / paper-dialog

can't restrict dialog to a parent element #57