如何在 Web 组件中使用标签的 querySelector答案

【问题标题】：How to use querySelector of Tags inside a Web Component如何在 Web 组件中使用标签的 querySelector
【发布时间】：2020-07-24 11:37:14
【问题描述】：

我正在使用 Web 组件构建一个应用程序，并且只有 vanila javascript。我想使用 vaadin-router 进行路由。

在我的 index.html 中，我只显示 Web 组件 app.module：

<!DOCTYPE html>
    <body>
        <mp-app-root></mp-app-root>
    </body>
</html>

app 模块是一个简单的 Web 组件。它应该在模板中显示路由模块。 Shadow DOM 是可选的。

app.module.js

import Template from './app.module.template.js'

class AppModule extends HTMLElement {
    connectedCallback() {
        this.innerHTML = Template.render();
    }
}

customElements.define('mp-app-root', AppModule)

模板只是渲染标签，路由应该发生的地方。

app.module.template.js

import './routing.module.js'

export default {
    render() {
        return `${this.html()}`;
    },

    html() {
        return `<script type="module" src="./routing.module.js"></script>
                <app-routing-module></app-routing-module>`;
    },
}

如您所见，我正在导入脚本 routing.module.js - 当我在控制台记录某些内容时，它也可以工作

现在，我正在使用 vaadin-router 进行路由，我想使用 querySelector 访问 <app-routing-module>-Tag，如下所示：

const outlet = document.querySelector('mp-app-root').querySelector('app-routing-module')

但它总是 null。

console.log(document.querySelector('mp-app-root') 工作并打印以下内容：

<mp-app-root>
    <app-routing-module></app-routing-module>
</mp-app-root>

【问题讨论】：

你能在你的浏览器中试试这个并告诉我们它是否有效吗？ jsfiddle.net/1j87xtqe
@Guerric P 是的，它有效。嗯，这很奇怪。
嗯，它可能会帮助你找到原因，我不知道！.

标签： javascript web-component

【解决方案1】：

您会在基于 Webkit 的浏览器（Safari、Chromium）中获得 null，因为：
您无法访问它刚刚创建的 DOM，在 connectedCallback
Elements DOM 尚未完全解析。

这被认为是 W3C Web 组件标准的正确实现

this.innerHTML 在 FireFox 中确实有其内容（W3C 标准的不同实现）

见：

正确代码：

setTimeout( () => {
  const outlet = document.querySelector('mp-app-root').querySelector('app-routing-module')
});

所有的 WebComponent 库都在底层做类似的事情；
延迟执行，直到 Eventloop 为空，并且 DOM 准备好接受您的选择/添加。

注意：querySelector 带有一个选择器，所以你可以这样写：

  const outlet = document.querySelector('mp-app-root app-routing-module')

【讨论】：