Javascript 如何在Web组件内使用querySelector的标记_Javascript_Web Component

Javascript 如何在Web组件内使用querySelector的标记

javascript

Javascript 如何在Web组件内使用querySelector的标记,javascript,web-component,Javascript,Web Component,我正在用Web组件和vanila javascript构建一个应用程序。我想使用vaadin路由器进行路由在我的index.html中，我只显示web组件app.module： <!DOCTYPE html> <body> <mp-app-root></mp-app-root> </body> </html> 模板只是呈现标记，路由应该发生在这里 app.module.template.j

我正在用Web组件和vanila javascript构建一个应用程序。我想使用vaadin路由器进行路由

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

app.module

：

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

模板只是呈现标记，路由应该发生在这里

app.module.template.js

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

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

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

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>`;
    },
}

您正在寻找：

const outlet = document.getElementsByTagName('mp-app-root')[0].getElementsByTagName('app-routing-module')[0];

它将使用深度优先的预顺序遍历返回第一个

mp app root

元素，然后在其中找到第一个

app路由模块
如果有多个，则需要执行操作，应使用一些循环，并从上面删除索引[0]

querySelector（选择器）
用于查找CSS选择器
选择器
import Template from './app.module.template.js'

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

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

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>`;
    },
}

包含一个或多个要匹配的选择器的DOMString。此字符串必须是有效的CSS选择器字符串；如果不是，则抛出语法错误异常。有关选择器以及如何管理选择器的更多信息，请参阅使用选择器定位DOM元素
在基于Webkit的浏览器（Safari、Chromium）中，您会得到null
，因为：

在connectedCallback

中，您无法访问刚刚创建的DOM
DOM元素尚未完全解析
这被认为是W3C Web组件标准的正确实现
this.innerHTML
在FireFox中有其内容（W3C标准的不同实现）
见：





正确代码：
所有WebComponent库在引擎盖下都做类似的事情

延迟执行，直到Eventloop为空，并且DOM准备好接受您的选择/添加

注意：querySelector
采用选择器，因此您可以编写：
  const outlet = document.querySelector('mp-app-root app-routing-module')

你能在你的浏览器里试试这个并告诉我们它是否有效吗@是的，它是有效的。嗯，这很奇怪。它可能会帮你找到原因，我不知道！。那么错误肯定来自其他地方，并且只在那里表现出来。你的名字没有拼写错误吗？我倾向于创建一个包含标记名、选择器等的对象，比如，const-APP\u-names={root:'mp-APP-root'，router:'APP-routing-module'，}
，然后像document.getElementsByTagName（APP\u-names.root）[0]
那样调用它。这真的很奇怪——是的，我没有打字错误。第一个getElementsByTagName工作正常，但第二个getElementsByTagName再次为null。