文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Web组件中使用标记的querySelector

问如何在Web组件中使用标记的querySelector
EN

Stack Overflow用户

提问于 2020-07-24 11:37:14

回答 1查看 2.5K关注 0票数 2

我正在用Web组件构建一个应用程序，只有vanila。我想用vaadin路由器路由。

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

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

应用程序模块是一个简单的web组件。它应该在模板中显示路由模块。阴影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 --当im console.logging之类的东西时，它也能工作。

现在，我使用vaadin-router进行路由，我想使用这样的querySelector访问<app-routing-module>-Tag：

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

但它始终是空。

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

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

javascript

web-component

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-24 12:12:37

您可以在基于Webkit的浏览器(Safari，Chromium)中获得null，因为：

在connectedCallback中，无法访问它刚刚创建的DOM

DOM元素还没有被完全解析。

这被认为是W3C网络组件标准的正确实现。

this.innerHTML有它的FireFox ( W3C标准的不同实现)的内容。

请参见：

正确代码：

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

所有的WebComponent库在幕后都会做类似的事情；

延迟执行，直到事件循环为空，并且DOM准备接受您的选择/添加。

注意：querySelector采用一个选择器，因此您可以编写：

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63072769

复制

相似问题

问如何在Web组件中使用标记的querySelector
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Web组件中使用标记的querySelectorEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Web组件中使用标记的querySelector
EN