Javascript 无法在按钮单击时查询选择阴影根（用于切换视图）

我有一个父组件

ha config user picker.js

和子组件

edit user view.js

父组件： 有一个用户映射，还有子组件标记及其道具。 click事件获取子组件的shadowRoot并调用方法

toggleView

<template is="dom-repeat" items="[[users]]" as="user">
    <paper-button on-click="clickEditUser">
      <paper-item>
        ...
      </paper-item>
    </paper-button>
  </template>

  <edit-user-view hass="[[hass]]" user="[[user]]"></edit-user-view>

  clickEditUser(ev) {
    this.user = ev.model.user;
    const el = this.shadowRoot.querySelector("edit-user-view");
    el.toggleView();
  }

...
单击编辑用户（ev）{
this.user=ev.model.user；
const el=this.shadowRoot.querySelector（“编辑用户视图”）；
el.toggleView（）；
}

子组件：

<fullscreen-pop-up>
   <dialog-header title="Edit User"></dialog-header>
   <div class="content">
     ...
   </div>
</fullscreen-pop-up>

toggleView = () => {
    const popup = this.shadowRoot.querySelector("fullscreen-pop-up");
    const dialog = popup.shadowRoot.querySelector("paper-dialog");
    dialog.toggle();
}

...
切换视图=（）=>{
const popup=this.shadowRoot.querySelector（“全屏弹出”）；
const dialog=popup.shadowRoot.querySelector（“纸张对话框”）；
dialog.toggle（）；
}

错误： 因此，当我单击映射用户时。首先，我得到错误

未捕获类型错误：无法读取null的属性“shadowRoot”

。这是

const popup=this.shadowRoot.querySelector（“全屏弹出”）。因此，弹出窗口返回null

但如果我再次单击任何用户。它得到了阴影根，工作正常

问题：那么为什么它第一次是空的，然后才起作用呢？
我该如何解决这个问题？
这可能是问题所在吗？

如果您需要更多了解，请告诉我。：）
 未在子组件的上下文中执行
toggleView
方法，您可以在使用
this
之前尝试
console.log（this）
，您将看到它不是元素

您可以尝试更换：

el.toggleView();

与

看看这是否是问题所在，如果是的话，以你认为合适的方式重构你的代码。请注意，我目前没有对此进行测试，因此可能会有一些小的差异。
在子组件的上下文中没有执行
toggleView
方法，您可以在使用
this
之前尝试
console.log（this）
，您将看到它不是元素

您可以尝试更换：

el.toggleView();

与

看看这是否是问题所在，如果是的话，以你认为合适的方式重构你的代码。请注意，我现在没有测试这个，所以可能会有一些小的差异