Бумажный диалог в полимере не открывается при вызове из прослушивателя событий

Question

У меня возникают проблемы с открытием бумажного диалогового окна, когда оно вызывается через dispatchEvent, который отправляется через другой компонент. Это вызывает наложение, но диалоговое окно не отображается.

У меня есть следующие компоненты настройки:

• общий родительский компонент, содержащий 2 железных страницы с пользовательскими дочерними страницами и прослушиватель для события сработавшего
• компонент первой страницы: здесь есть кнопка, запускающая пользовательское событие
• второй компонент страницы: содержащий функцию для открытия диалога.

Цель состоит в том, чтобы через отправленное событие от первого дочернего компонента страницы это захватывалось родительским компонентом, и метод вызывался на втором компоненте страницы, открывая диалоговое окно бумаги. Это прекрасно работает, когда событие запускается и захватывается на одном и том же компоненте, но не когда разные компоненты находятся в игре... Бумажное диалоговое окно не открывается. Вместо этого активируется только фон.

Ниже приведен фрагмент кода (не полный, чтобы сохранить компактность):

1) родительский компонент, содержащий 2 дочерних элементов и имеющий слушателя

<dom-module id="parent-comp">
<template>
//....
<div class="main-frame">
  <iron-pages id="pages" selected="[[state]]" attr-for-selected="state" fallback-selection="first">
    <child-page-component id="first" state="first"></child-page-component>
    <child-page-component id="second" state="second"></child-page-component>
  </iron-pages>
/....
<template>
//....

<script>
   class ParentPage extends Polymer.Element {
      // ... all needed stuff...

      ready(){
        super.ready();
        // LISTEN FOR event 'test-dialog' !!
        this.addEventListener('test-dialog', (e) => this._onTestEvent(e));
      }

      //...

      _onTestEvent(e){
         // When event is hit, call the second child method...
         this.$.second.callTestEvent();
      }
   }
   //....
 </script>

2) В первом дочернем компоненте есть кнопка, запускающая dispatchEvent, который перехватывается родителем...

  // ....

  <paper-button raised on-tap="_test">Test</paper-button>
  // ....
  <script>
      class ChildPageComponent extends Polymer.Element {
      //....
      _test(){
          // FIRE CUSTOM EVENT 'test-dialog'
          this.dispatchEvent(new CustomEvent('test-dialog', {
              bubbles: true, composed: true, detail: {}
          }));
      }
     //....

3) Во втором дочернем компоненте есть определение диалога и функция, которую можно вызвать из родительского элемента.

  // ....
  <paper-dialog id="dialogtst" modal>
     <div>
        <h1>hello</h1>
     </div>
     <div class="buttons">
        <paper-button dialog-confirm>Close</paper-button>
     </div>
  </paper-dialog>
  // ....

  // ....
  <script>
      class ChildPageComponent extends Polymer.Element {

      //....
      callTestEvent(){
          // Open Dialog....
          this.$.dialogtst.open();  // SHOULD OPEN RIGHT??
      }
     //....

Но, как уже было сказано, на весь экран накладывается модальный фон, и диалог не отображается. Все это работает, когда вызывается через кнопку напрямую, на любом из компонентов, или когда событие записывается в тот же компонент... Но не тогда, когда оно передается родителю...

Может кто-нибудь объяснить, почему и как это работает? Весь совет очень ценится!