定义：Web Components提供了及语言声支持的，对视图层封装的能力，可以让单个组件相关的HTML、CSS、JavaScript模板运行在以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">
<script src="./btn.js"></script>
<title>Document</title>
</head>
<body>
<xiaoman-btn></xiaoman-btn>
<xiaoman-btn></xiaoman-btn>
<xiaoman-btn></xiaoman-btn>
</body>
</html>class Btn extends HTMLElement {
constructor() {
super()
// 使用const定义的shaDom在类实例化后无法访问,attachShadow创建一个影子节点用于隔离选择器
const shaDom = this.attachShadow({ mode: 'open' })
this.p = this.h('p')
// 使用innerText
this.p.innerText = '小满'
// 设置样式(注意两个参数都是字符串)
this.p.setAttribute(
'style',
'width:200px;height:200px;border:1px solid black'
)
// 将节点添加到容器中
shaDom.appendChild(this.p)
}
h(el) {
return document.createElement(el)
}
/**
* 生命周期
*/
//当自定义元素第一次被连接到文档 DOM 时被调用。
connectedCallback() {
console.log('我已经插入了！！！嗷呜')
}
//当自定义元素与文档 DOM 断开连接时被调用。
disconnectedCallback() {
console.log('我已经断开了！！！嗷呜')
}
//当自定义元素被移动到新文档时被调用
adoptedCallback() {
console.log('我被移动了！！！嗷呜')
}
//当自定义元素的一个属性被增加、移除或更改时被调用
attributeChangedCallback() {
console.log('我被改变了！！！嗷呜')
}
}
window.customElements.define('xiaoman-btn', Btn)
template模式
index.html的内容保持不变
class Btn extends HTMLElement {
constructor() {
super()
// 使用const定义的shaDom在类实例化后无法访问,attachShadow创建一个影子节点用于隔离选择器
const shaDom = this.attachShadow({ mode: 'open' })
// 创建一个template元素
this.p = this.h('template')
this.p.innerHTML = `
<style>
div{
width:200px;
height:200px;
background:red;
}
</style>
<div>小满</div>
`
// 将节点添加到容器中,注意需要克隆并且只有template元素才有content属性
shaDom.appendChild(this.p.content.cloneNode(true))
}
h(el) {
return document.createElement(el)
}
/**
* 生命周期
*/
//当自定义元素第一次被连接到文档 DOM 时被调用。
connectedCallback() {
console.log('我已经插入了！！！嗷呜')
}
//当自定义元素与文档 DOM 断开连接时被调用。
disconnectedCallback() {
console.log('我已经断开了！！！嗷呜')
}
//当自定义元素被移动到新文档时被调用
adoptedCallback() {
console.log('我被移动了！！！嗷呜')
}
//当自定义元素的一个属性被增加、移除或更改时被调用
attributeChangedCallback() {
console.log('我被改变了！！！嗷呜')
}
}
window.customElements.define('xiaoman-btn', Btn)
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/format,webp/resize,h_160,m_lfit)