切换自定义元素“聚合物”中的纸张对话框

在使用Polymer和JavaScript进行开发时，我还很陌生，我觉得切换纸张对话框的方法不是最好的方法，或者可以改进。当前，我尝试从自定义元素外部调用toggle（）函数，尽管我遇到错误，但
我创建了一个名为my-dialog的自定义元素，它对我有用：

<dom-module id="my-dialog">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay">
      <!-- Dialog content -->
      <h2>Hello World</h2>
    </paper-dialog>

  </template>

  <script>
    Polymer({
      is: 'my-dialog',

    });
  </script>
</dom-module>

我现在要从我的页面之一中单击一个纸按钮来打开和关闭对话框。它可以正常工作，但是正如我上面提到的，我有种感觉，那就是我在这里所做的并不是很专业。

<dom-module id="my-profile-view">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>        
    <my-dialog id="myDialog"></my-dialog>

  </template>

  <script>
    Polymer({
      is: 'my-profile-view',

      //Open dialog
      toggleDialog: function() {
        var dialog = this.shadowRoot.querySelector('#myDialog');
        var popUp = dialog.shadowRoot.querySelector('paper-dialog');
        popUp.toggle();
      },
    });
  </script>
</dom-module>

错误消息。我进入控制台：

（程序）：5未捕获的TypeError：无法读取null（匿名函数）@（程序）：5（匿名函数）@（程序）：20的属性'removeAttribute'

如果有人可以帮我清理一下，那就太好了。也许给我一个提示，我还能做什么。