程序员经验分享-hwhale

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

2023-12-02

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

In my 索引.html我只显示Web组件app.module:

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

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

应用程序模块.js

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

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

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

模板只是渲染标签，路由应该发生在其中。

应用程序模块模板.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- 当我在 console.logging 中记录某些内容时，它也有效

现在，我正在使用vaadin 路由器用于路由，我想访问<app-routing-module>- 使用 querySelector 标记，如下所示：

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>

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

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

this.innerHTML USED TO在 FireFox 中拥有其内容，Mozilla 于 2019 年修复了此问题

See:

  • 如何获取自定义元素的内容
  • 在connectedCallback中等待Element Upgrade：FireFox和Chromium差异
  • 通过createElement创建WebComponent

正确代码：

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

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

Note: querySelector需要一个选择器，所以你可以写：

  const outlet = document.querySelector('mp-app-root app-routing-module')
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

webcomponent

如何在 Web 组件中使用标签的 querySelector 的相关文章

随机推荐

  • 如何在Android中从开火中检索聊天记录

    我有一个聊天应用程序 我想在其中检索两个用户之间的聊天历史记录 我有一个用于检索聊天消息的节 那就是

  • 无效的程序计数器值：0

    我目前正在 MIPS 处理器下使用汇编语言 我现在在 使用 MARS 模拟器 由于未知的原因 我每次运行后都会收到以下错误消息 Go 运行 try s 错误 无效的程序计数器值 0 Go 执行因错误而终止 我收到此错误消息 与我正在使用的代

  • 我的 VS CODE 扩展代码运行器无法正常工作

    您好 我的问题是 在我的 Visual Studio 代码中 我的代码运行器扩展不提供任何输出 我看过很多教程 并完成了所有工作 研究 下载 Node js 并将文件保存为 JavaScript 文件并验证路径 我输入了 console l

  • 我应该将 JavaScript 放在哪里 - 页面还是外部文件？

    在 VS 2008 中 我有一个 ASP NET 内容页面 其中有一个母版页 我想为此页面添加用于客户端验证等的 JavaScript 函数 我的问题是 我应该将这些脚本单独编写吗 js文件 或嵌入到 aspx file 这种选择会影响网站

  • GCM 消息被覆盖

    我正在使用 GCM 推送通知向用户传递一些通知 我的问题是 当我发送一条消息时 如果发送多条消息 则效果很好 然后最后一条消息会显示给所有通知 我哪里做错了 private static void generateNotification

  • MonoTouch：从 Obj-C 到 MonoTouch

    我正在尝试从现有的 Objective C 项目调用 MonoTouch 程序集 我找到了这篇文章 在那里它很好地描述了这些步骤 但是当我尝试在 XCode 中构建项目时 我收到以下错误 错误 没有指定名称或路径的 SDK Develope

  • 模型关联问题

    因此 我正在实施一个向上 向下投票机制 并为其生成一个模型 到目前为止 我了解到一个视频 将投票的内容 有一个 vote count 而 vote count 属于视频 但是 我还想在 vote count 数据库中跟踪对视频投票的用户 这

  • 为什么我的 LINQ INSERTS 没有在 SQL Server CE 3.5 中保留？

    我将 LINQ to SQL 与 Sql Server Compact Edition 3 5 和 VS2008 一起使用 我有一个非常简单的表 Tokens 其中包含唯一标识符主键 TokenID 和其他两个可为空的字段 UsedBy 和

  • RecyclerView 在新行中显示以前在 EditText 中输入的值

    我正在创建一个 Android 应用程序 我在其中使用recyclerView并且 recyclerView 的行有editText 这是我的ReadingAdapter class public class ReadingAdapter

  • 如何在jdbc postgresql准备好的语句中多次使用相同的值

    有没有办法在 jdbc postgresql 驱动程序的准备语句中多次使用相同的变量 例如 我想使用以下语句 但每个问号具有相同的值 PreparedStatement ps pg prepareCall SELECT FROM mytab

  • xsl for-each：每 n 行添加代码块？

    我正在尝试将一些代表图像库的 xml 转换为 html 表 必须使用 html 而不是 css 来完成 如何添加换行符 tr 每六列左右有 xsl 吗 我有这个 tr

  • 旋转SCNNode相对局部坐标

    我正在尝试旋转节点SCNAction 但它相对于父级的坐标空间旋转 是否可以相对局部坐标系旋转节点 当然 您可以使用以下命令获取父级旋转轴的空间坐标转换向量 method 例如 此操作将绕局部 x 轴旋转 180 度 SCNAction r

  • Linq 中的三元运算符

    var result from payroll in currentMonthPayroll select new SalaryDifference PreviousMonthSalary previousMonthPayroll Wher

  • 静态和非静态字段

    只是为了澄清我的想法是对的 在java中静态字段是一个被整个类使用的变量 字段 或者可以被引用该类的所有对象使用 非静态字段是由对象定义的变量吗 引用与对象 1 相同的类的第二个对象可以具有与对象 1 的静态字段不同的值吗 与实例变量不同

  • 合并日期范围

    这里是 Oracle SQL 新手 也是第一次发布海报 我以为这很简单 直到我意识到我无法弄清楚如何拆分返回作业 这是我的分配表 ASGN ID ST DT END DT POS LOCN STATUS WAGE CD A 12 31 20

  • 如何回显公共文件夹之外的图像

    在此项目中 我将管理员提交的文件上传到公共文件夹之外的文件夹 web the public folder upload uploading image to this which is at the same level as the pu

  • 在 ggplot2 中显示频率和条形图

    我正在尝试在条形图中显示频率 好吧 我想要它们某处在图表中 条形下方 条形内 条形上方或图例区域中 我记得 我可能是错的 它可以在ggplot2 这可能是一个简单的问题 至少看起来很容易 这是代码 p lt ggplot mtcars p

  • 使用方法 update_all

    假设我有一个模型 class Result lt ActiveRecord Base attr accessible x y sum end 而不是做 Result all find each do s s sum compute sum

  • 编写一个批处理文件以按日期和时间删除文件夹

    精确重复 如何编写批处理文件来删除文件夹中 5 天或更早的文件 编写一个批处理文件以从文件夹中删除 6 天前的文件 编写一个批处理文件以从文件夹中删除 5 天前的文件 如何编写批处理文件来定期删除文件夹和文件 如何创建按计划删除文件夹的批处

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

    我正在使用 Web 组件和普通 javascript 构建一个应用程序 我想使用 vaadin router 进行路由 In my 索引 html我只显示Web组件app module

热门标签