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

JavaScript使用webcomponent的简单示例

news 2025/12/26 3:20:47

官方网站:

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/12/25 10:29:19

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/12/19 22:35:03

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/12/22 12:07:54

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/12/17 14:43:00

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/12/24 8:39:38

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2025/12/22 9:15:35