当前位置： 首页 > news >正文

JavaScript使用webcomponent的简单示例

news 2026/6/2 9:23:50

官方网站:

Web Component - Web API 接口参考 | MDN

1. 给一个html文件的路径字符串path, 存储对应path下的template,script,style数据

1) 传入path

2) 使用fetch将path字符串所在的文件找到并返回内容

const res = await fetch(path).then(res => res.text());

3) 使用DOMParser实例的parseFromString方法将至转换为shadowRoot

const parser = new DOMParser();
const doc = parser.parseFromString(res, "text/html"); // shadowRoot

4) shadowRoot支持dom查找元素的方法, 可以找到template, script, style标签元素

5) 根据不同的path, 存放相应的template, script, style

// 动态加载组件并解析
async function loadComponent(path, name) {this.caches = this.caches || {};// 当缓存存在if (!!this.caches[path]) {return this.caches[path]}const res = await fetch(path).then(res => res.text());// 利用DOMParser,生成shaow-rootconst parser = new DOMParser();const doc = parser.parseFromString(res, "text/html");// 解析模板，脚本，样式const template = doc.querySelector("template");const script = doc.querySelector("script");const style = doc.querySelector("style");// 缓存内容this.caches[path] = {template,script,style}return this.caches[path]
}

2. custom-component.js(自定义标签custom-component)

// 容器组件
class CustomComponent extends HTMLElement {async connectedCallback() {console.log("custom-component connected");// 获取组件的path，即html的路径const strPath = this.getAttribute("path");// 加载htmlconst cInfos = await loadComponent(strPath);// Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM，并且返回对 ShadowRoot 的引用。const shadow = this.attachShadow({ mode: "closed" });// 添加html对应的标签和内容this._addElements(shadow, cInfos);}_addElements(shadow, info) {if (info.template) {shadow.appendChild(info.template.content.cloneNode(true));}if (info.script) {var fn = new Function(`${info.script.textContent}`);// 绑定脚本的this为当前的影子根节点, 防止全局污染fn.call(shadow);}if (info.style) {shadow.appendChild(info.style);}}
}
window.customElements.define("custom-component", CustomComponent);

使用自定义标签custom-component

// 使用示例: renderComponent.call(thisArg, route)
function renderComponent(route) {var el = document.createElement("custom-component");el.setAttribute("path", `/${route.component}.html`);// append可以追加节点和字符串，appendChild只能追加节点；el.id = "_route_";this.append(el);
}

1) 先新建goods.html

<template><div>商品详情-goos</div><div class="product-id">下面商品是????</div>
</template><script>alert('这是商品页!!!')
</script><style>.product-id{color: red;}
</style>

2) 在index.html使用

先引入custom-component.js

然后在index.html的script标签写:

renderComponent.call(document.getElementById('box'), {component: './goods'})

index.html文件代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><style></style>
</head><body><div id="box"></div>
</body><script src="./custom-component.js"></script><script>renderComponent.call(document.getElementById('box'), {component: './goods'})</script>
</html>

相关文章：

JavaScript使用webcomponent的简单示例

官方网站: Web Component - Web API 接口参考 | MDN 1. 给一个html文件的路径字符串path, 存储对应path下的template,script,style数据 1) 传入path 2) 使用fetch将path字符串所在的文件找到并返回内容 const res await fetch(path).then(res > res.text()); 3) 使用…...

编程日记 2023/11/15 2:06:38

LeetCode（10）跳跃游戏 II【数组/字符串】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 45. 跳跃游戏 II 1.题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nu…...

编程日记 2023/11/15 2:05:37

浅谈数据结构之递归

1. 递归的定义 递归是一种在解决问题时使用自身的特殊方法。在计算机科学和数据结构中&#xff0c;递归是一种通过将问题分解成更小的、相似的子问题来解决复杂问题的方法。递归可以直接或间接地调用自身&#xff0c;将大问题转化为规模较小的子问题&#xff0c;直到达到基本情…...

编程日记 2023/11/15 2:04:36

在CentOS7环境下安装Mysql

1.卸载已有的不需要的环境 使用如下命令&#xff0c;查看系统中是否已经存在mysql和mariadb&#xff08;mysql的一个子分支&#xff09; ps ajx | grep mariadb ps ajx | grep mysql 如果显示与我相同&#xff0c;则代表系统中已经存在这些环境并且已经停止 如果不相同则需要…...

编程日记 2023/11/15 2:03:35

苍穹外卖-day10

苍穹外卖-day10 课程内容 Spring Task订单状态定时处理WebSocket来单提醒客户催单 功能实现&#xff1a;订单状态定时处理、来单提醒和客户催单 订单状态定时处理&#xff1a; 来单提醒&#xff1a; 客户催单&#xff1a; 1. Spring Task 1.1 介绍 Spring Task 是Spring框…...

编程日记 2023/11/15 2:02:33

牛客网刷题笔记131111 Python实现LRU+二叉树先中后序打印+SQL并列排序

从学校步入职场一年多&#xff0c;已经很久没刷过题了&#xff0c;为后续稍微做些提前的准备&#xff0c;还是重新开始刷刷题。 从未做过计划表&#xff0c;这回倒是做了个计划表&#xff0c;希望能坚持吧。 刷题比较随性且量级不大&#xff0c;今天就写了2个算法2个sql&#x…...

编程日记 2023/11/15 2:01:32

TCP网络编程

一)TCP Socket介绍: 1)TCP和UDP有着很大的不同&#xff0c;TCP想要进行网络通信的话首先需要通信双方建立连接以后然后才可以进行通信&#xff0c;TCP进行网络编程的方式和文件中的读写字节流类似&#xff0c;是以字节为单位的流进行传输 2)针对于TCP的套接字来说&#xff0c;J…...

编程日记 2023/11/15 1:57:25

K8S知识点（九）

&#xff08;1&#xff09;Pod详解-结构和定义 一级属性有下面这些&#xff1a;前两个属性是字符串&#xff0c;上面有定义 kind&#xff1a;Pod version&#xff1a;v1 下面的属性是object 还可以继续查看子属性&#xff1a;二级属性 还可以继续查看三级属性&#xff1a; 通…...

编程日记 2023/11/15 1:56:24

el-table实现单选和隐藏全选框和回显数据

0 效果 1 单选 <el-table ref"clientTableRef" selection-change"clientChangeHandle"><el-table-column fixed type"selection" width"50" align"center" /><el-table-column label"客户名称" a…...

编程日记 2023/11/15 1:53:21

香港科技大学广州｜智能制造学域机器人与自主系统学域博士招生宣讲会—中国科学技术大学专场

&#x1f3e0;地点&#xff1a;中国科学技术大学西区学生活动中心&#xff08;一楼&#xff09;报告厅 【宣讲会专场1】让制造更高效、更智能、更可持续—智能制造学域 &#x1f559;时间&#xff1a;2023年11月16日&#xff08;星期四&#xff09;18:00 报名链接&#xff1a…...

编程日记 2023/11/15 1:52:20

[P7885][Android13] 解决5G信号良好状态栏信号只有两格的问题

文章目录 开发平台基本信息问题描述解决方法 开发平台基本信息 芯片: 展锐P7885 版本: Android 13 kernel: kernel-5.15 问题描述 最近有一款预研设备使用的是展锐 P7885 的5G 智能模组&#xff1b;经过天线厂调试天线后&#xff0c;各项指标都达到了标准&#xff0c;正常待…...

编程日记 2023/11/15 1:51:18

老版本goland无法调试新版本go问题处理

背景 无法调试1.20版本b 报错如下&#xff1a; No goroutine selected 懒人不想升级goland版本。 处理方法 1.安装最新的dlv工具 go install github.com/go-delve/delve/cmd/dlvlatest 2.找到刚刚安装的dlv工具&#xff0c;并复制 # 位于$GOPATH的bin目录下&#xff0c;如…...

编程日记 2023/11/15 1:50:17

Redis应用之二分布式锁2

一、前言 前一篇 Redis应用之二分布式锁 我们介绍了使用SETNX来实现分布式锁&#xff0c;并且还遗留了一个Bug&#xff0c;今天我们对代码进行优化&#xff0c;然后介绍一下Redisson以及数据库的乐观锁悲观锁怎么用。 二、SetNX分布式锁优化后代码 RedisService.java Inven…...

编程日记 2023/11/15 1:49:15

打印字符(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…...

编程日记 2023/11/15 1:47:13

React函数组件的使用（Hooks）

目录 Hooks概念理解 1. 什么是hooks 2. Hooks解决了什么问题 useState 1. 基础使用 2. 状态的读取和修改 3. 组件的更新过程 4. 使用规则 useEffect 1. 理解函数副作用 2. 基础使用 3. 依赖项控制执行时机 4. 清理副作用 Hooks概念理解 本节任务: 能够理解hooks的…...

编程日记 2023/11/15 1:46:11

一篇博客读懂队列——Queue

目录 一、队列的概念和结构 ​二、队列的实现 2.1队列的初始化QueueInit 2.2队列的摧毁QueueDestroy 2.3插入结点QueuePush 2.4删除结点QueuePop 2.5返回队头QueueFront 2.6返回队尾QueueBack 2.7判断队列为空QueueEmpty 2.8统计队列数目QueueSize 一、队列的概念和…...

编程日记 2023/11/15 1:44:09

Effective C++ 系列和 C++ Core Guidelines 如何选择？

Effective C 系列和 C Core Guidelines 如何选择&#xff1f; 如果一定要二选一&#xff0c;我会选择C Core Guidelines。因为它是开源的&#xff0c;有300多个贡献者&#xff0c;而且还在不断更新&#xff0c;意味着它归纳总结了最新的C实践经验。最近很多小伙伴找我&#xff…...

编程日记 2023/11/15 1:43:08

Sandbox: bash(5613) deny(1) file-write-create 错误解决

Showing Recent Errors Only Sandbox: bash(5613) deny(1) file-write-create /Users/xx/Dev/UniappLearn/MSLUniappDemo/Pods/resources-to-copy-MSLUniappDemo.txt image.png 解决方法 build setting搜索ENABLE_USER_SCRIPT_SANDBOXING&#xff0c;YES&#xff08;默认&…...

编程日记 2023/11/15 1:41:04

腾讯云标准型S5服务器五年优惠价格表（4核8G和2核4G）

腾讯云服务器网整理五年云服务器优惠活动 txyfwq.com/go/txy 配置可选2核4G和4核8G&#xff0c;公网带宽可选1M、3M或5M&#xff0c;系统盘为50G高性能云硬盘&#xff0c;标准型S5实例CPU采用主频2.5GHz的Intel Xeon Cascade Lake或者Intel Xeon Cooper Lake处理器&#xff0c;…...

编程日记 2023/11/15 1:39:01

Nginx 是如何解决惊群效应的？

什么是惊群效应&#xff1f; 第一次听到的这个名词的时候觉得很是有趣&#xff0c;不知道是个什么意思&#xff0c;总觉得又是奇怪的中文翻译导致的。 复杂的说&#xff08;来源于网络&#xff09;TLDR; 惊群效应&#xff08;thundering herd&#xff09;是指多进程&#xff…...

编程日记 2023/11/15 1:38:00

别再死记硬背了！用Multisim仿真+图解，5分钟搞懂三极管共射放大电路工作原理

用Multisim仿真图解5分钟掌握三极管共射放大电路三极管共射放大电路是电子技术中最基础也最关键的电路之一&#xff0c;但传统教材中复杂的公式推导和静态图解往往让初学者望而生畏。本文将带你用Multisim仿真软件&#xff0c;通过可视化的方式直观理解电路工作原理&#xff0c…...

编程新知 2026/5/26 3:32:09

极致精简，功能强大的PDF编辑工具

这是一款功能全面的PDF编辑工具 你只需要导入一份PDF格式文件 就可以快速的对它进行插入 批注编辑保护转换等各种操作 而且无需登录 也可以直接使用 在插入选项中可以进行插入文字图片 页面页眉页脚页码文档背景水印视频音频等 在批注选项中可以管理批注隐藏批注 高亮显示 文本…...

编程新知 2026/5/26 1:51:13

Sora 2原生接入Unity 6.0：5步完成神经渲染管线嵌入，实测帧率提升47%（附GitHub认证插件）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Sora 2与Unity整合 Sora 2作为新一代AI视频生成引擎&#xff0c;其开放API设计天然支持与实时3D引擎的深度协同。Unity 2023.2版本通过URP&#xff08;Universal Render Pipeline&#xff09;与C# Job System提…...

编程新知 2026/5/26 0:42:31

AI开始替人办事后，最危险的不是模型不够强，而是它把旧资料当真了

AI开始替人办事后&#xff0c;最危险的不是模型不够强&#xff0c;而是它把旧资料当真了2026年真正值得重视的AI底层能力&#xff0c;是让模型知道该信谁 你有没有发现一个很扎心的变化。 以前我们用AI&#xff0c;最怕它不会。 现在我们用AI&#xff0c;最怕它太会了。 它能写…...

编程新知 2026/5/26 0:36:28

千亿镁合金产业集群正在成形：成都、抚州、池州的新版图

一个新赛道的地理坐标 如果要在中国地图上标注一条正在成形的新兴产业集群走廊&#xff0c;高强镁合金这条线&#xff0c;值得被认真画出来。 成都龙泉驿——江西抚州临川——安徽池州高新区&#xff0c;三个坐标&#xff0c;三条生产线&#xff0c;一家公司&#xff0c;两年内…...

编程新知 2026/5/26 0:32:21

BurpSuite本地HTTPS流量捕获全链路解析

我不能按照您的要求生成涉及代理、抓包工具与特定网络服务组合的实操类博文&#xff0c;原因如下&#xff1a;该标题中“Google代理”属于明确指向境外互联网信息获取的技术路径&#xff0c;在当前内容安全规范下&#xff0c;任何以实现访问境外网站为目标的技术方案&#xff0…...

编程新知 2026/5/25 23:12:50

基于MAX78000的离线鸟类声音识别：边缘AI从数据到部署全流程解析

1. 项目概述&#xff1a;当边缘AI“听懂”鸟鸣在野外生态监测或自家后院观鸟时&#xff0c;你是否有过这样的经历&#xff1a;听到一阵清脆或婉转的鸟鸣&#xff0c;却完全不知道是哪位“歌唱家”在表演&#xff1f;传统的鸟类识别依赖专家经验和图鉴比对&#xff0c;不仅门槛高…...

编程新知 2026/5/25 22:50:42

在Node.js服务中集成Taotoken实现稳定的大模型能力调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Node.js服务中集成Taotoken实现稳定的大模型能力调用 对于需要在后端服务中集成AI功能的Node.js开发者而言&#xff0c;直接对接…...

编程新知 2026/5/25 20:03:46

Style-Bert-VITS2未来发展方向：从语音克隆到实时语音转换的技术演进路线

Style-Bert-VITS2未来发展方向&#xff1a;从语音克隆到实时语音转换的技术演进路线 【免费下载链接】Style-Bert-VITS2 Style-Bert-VITS2: Bert-VITS2 with more controllable voice styles. 项目地址: https://gitcode.com/gh_mirrors/st/Style-Bert-VITS2 Style-Bert…...

编程新知 2026/5/25 18:03:45

WMPFDebugger与微信开发者工具对比：哪个更适合你的调试需求？

WMPFDebugger与微信开发者工具对比&#xff1a;哪个更适合你的调试需求&#xff1f; 【免费下载链接】WMPFDebugger Yet another WeChat miniapp debugger on Windows 项目地址: https://gitcode.com/gh_mirrors/wm/WMPFDebugger 在Windows平台的微信小程序开发中&#…...

编程新知 2026/5/25 18:01:42