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

JavaScript使用webcomponent的简单示例

news 2025/11/6 20:19:45

官方网站:

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

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/11/5 1:22:14

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/10/30 5:56:39

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/10/30 22:14:59

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/11/1 4:11:49

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/11/5 15:46:44

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/10/27 18:46:57

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16