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

【问题标题】：Cannot queryselect a shadowRoot on button click(for toggling view)无法在按钮单击时查询选择阴影根（用于切换视图）
【发布时间】：2020-02-27 13:04:00
【问题描述】：

我有一个父组件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();
  }

子组件：

<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();
}

错误： 因此，当我单击映射的用户时。首先我得到错误Uncaught TypeError: Cannot read property 'shadowRoot' of null。这是const popup = this.shadowRoot.querySelector("fullscreen-pop-up");。所以弹出窗口返回 null。

但如果我再次点击任何用户。它得到了 shadowRoot 并且工作正常。

问题：那么为什么它第一次为空，然后又起作用了？我该如何解决这个问题？这可能是问题吗？ https://github.com/Polymer/polymer/issues/5144

如果您需要更多了解，请告诉我。 :)

【问题讨论】：

标签： javascript polymer shadow-dom

【解决方案1】：

toggleView 方法没有在你的子组件的上下文中执行，你可以在使用this 之前尝试console.log(this)，你会发现它不是元素。

您可以尝试替换：

el.toggleView();

与

el.toggleView.call(el);

看看这是否是问题所在，如果是，请按照您认为合适的方式重构您的代码。请注意，我目前没有对此进行测试，因此可能存在细微差异。

【讨论】：