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

JavaScript使用webcomponent的简单示例

news 2026/3/30 17:34:35

官方网站:

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

从磁力线到最小磁阻：手把手拆解一个微型直流电机的内部‘磁路战争’

从磁力线到最小磁阻&#xff1a;手把手拆解一个微型直流电机的内部‘磁路战争’ 拆开一枚硬币大小的玩具电机&#xff0c;你会看到一场无声的物理博弈——磁力线像急于回家的士兵&#xff0c;不断寻找最短路径&#xff1b;而转子则是这场战役的指挥官&#xff0c;通过精确的旋…...

编程新知 2026/3/30 17:24:02

低成本搭建DNF外网服务器：腾讯云轻量应用服务器实战教程

腾讯云轻量应用服务器搭建DNF外网版全攻略 最近几年&#xff0c;怀旧游戏私服搭建在技术爱好者圈子里越来越流行。作为一款经典的横版格斗网游&#xff0c;DNF&#xff08;地下城与勇士&#xff09;的私服搭建需求尤其旺盛。本文将详细介绍如何利用腾讯云轻量应用服务器&#x…...

编程新知 2026/3/30 17:15:59

Java开源项目—上门家政系统源码

首页与服务展示LBS定位服务&#xff1a; 系统自动定位用户所在城市&#xff08;如“广州”&#xff09;&#xff0c;并根据地理位置推荐附近的服务资源&#xff0c;确保服务的时效性。多品类服务入口&#xff1a; 首页采用图标矩阵展示&#xff0c;涵盖家庭保洁、上门维修、家电…...

编程新知 2026/3/30 16:15:11

Clover Bootloader虚拟化环境部署终极指南：QEMU、KVM、Xen全平台支持

Clover Bootloader虚拟化环境部署终极指南&#xff1a;QEMU、KVM、Xen全平台支持 【免费下载链接】CloverBootloader Bootloader for macOS, Windows and Linux in UEFI and in legacy mode 项目地址: https://gitcode.com/gh_mirrors/cl/CloverBootloader Clover Bootl…...

编程新知 2026/3/30 15:28:46

RTKLIB进阶指南：深入理解北斗三代CNAV电文与BDS-3星历数据结构

RTKLIB进阶指南&#xff1a;北斗三代CNAV电文与星历数据结构深度解析 当你在RTKLIB的源码中第一次看到eph_t结构体里那些神秘的Adot、ndot字段时&#xff0c;是否好奇过它们如何精确描述北斗三号卫星的轨道变化&#xff1f;这些看似简单的浮点数背后&#xff0c;隐藏着中国自主…...

编程新知 2026/3/30 15:08:40

从 99.8% 到 14.9%：Paperxie AI 降重，让论文 AIGC 焦虑彻底成为过去式

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/weight?type1https://www.paperxie.cn/weight?type1 一、写在前面&#xff1a;被 AIGC 检测支配的论文焦虑&#xff0c;终于有解了 当知网、维普等平台全面升级 AIGC 检测…...

编程新知 2026/3/30 14:32:16

从休眠到唤醒：深入解读AUTOSAR CanNm的Bus Load Reduction与Immediate Restart机制

从休眠到唤醒&#xff1a;深入解读AUTOSAR CanNm的Bus Load Reduction与Immediate Restart机制 在新能源汽车和智能座舱快速发展的今天&#xff0c;车载电子系统的功耗优化与实时响应能力成为工程师面临的核心挑战。AUTOSAR CanNm模块作为车载网络管理的关键组件&#xff0c;其…...

编程新知 2026/3/30 13:51:21

别再手动算了！用Matlab RF Toolbox一键搞定S/Z/Y/ABCD参数转换（附3dB电桥实例代码）

射频工程师的救星&#xff1a;Matlab RF Toolbox参数转换全攻略 每次面对S/Z/Y/ABCD参数的手动转换&#xff0c;是不是总有种想摔计算器的冲动&#xff1f;那些复杂的矩阵运算和容易出错的推导过程&#xff0c;简直是在浪费生命。作为一名射频工程师&#xff0c;我深知这种痛苦…...

编程新知 2026/3/30 13:24:57

LiuJuan Z-Image Generator真实案例：为独立音乐人生成专辑封面人像全流程

LiuJuan Z-Image Generator真实案例&#xff1a;为独立音乐人生成专辑封面人像全流程 最近&#xff0c;一位独立音乐人朋友找到我&#xff0c;说他想为自己的新专辑设计一个封面。预算有限&#xff0c;请不起专业画师&#xff0c;但又不想要那些千篇一律的模板。他想要一张能体…...

编程新知 2026/3/30 11:37:56

零基础玩转BEYOND REALITY Z-Image：手把手教你搭建高精度文生图引擎

零基础玩转BEYOND REALITY Z-Image&#xff1a;手把手教你搭建高精度文生图引擎 1. 引言&#xff1a;为什么选择BEYOND REALITY Z-Image 在当今AI图像生成领域&#xff0c;BEYOND REALITY Z-Image以其卓越的写实表现力脱颖而出。这款基于Z-Image-Turbo底座和BEYOND REALITY S…...

编程新知 2026/3/30 11:35:56