JavaScript Web组件是基于Custom Elements、Shadow DOM和HTML Templates构建的原生可复用组件，支持样式隔离、逻辑独立与语义化标签，通过customElements.define()注册，具备生命周期钩子、属性监听、事件通信及slot内容分发能力。
JavaScript Web组件是基于浏览器原生标准构建可复用、封装良好的自定义HTML元素，核心依赖 Custom Elements、Shadow DOM 和 HTML Templates 三大API。不需框架即可实现样式隔离、逻辑独立与语义化标签。
定义一个基础Web组件
通过 customElements.define() 注册新标签，类必须继承 HTMLElement：
- 在
constructor中调用super()，并可初始化 Shadow DOM（this.attachShadow({mode: 'open'})） - 使用
connectedCallback响应元素插入DOM的时机，适合渲染或绑定事件 - 用
disconnectedCallback清理资源（如取消定时器、移除事件监听） - 支持属性变更监听：定义
observedAttributes静态 getter，并在attributeChangedCallback中响应变化
封装样式与结构（Shadow DOM）
调用 attachShadow 创建影子根后，所有内部HTML和CSS默认与外部隔离：
- 内部样式不会泄漏到页面其他部分，外部CSS也无法直接作用于影子树内元素
- 可通过
::part或::theme（实验性）暴露部分样式钩子，供外部有限定制 - 推荐用
<template>预定义结构，在connectedCallback中克隆内容，提升性能和可读性
与页面交互和数据传递
Web组件通过HTML属性、事件和方法对外提供接口：
立即学习“Java免费学习笔记（深入）”；
- 属性传值：在类中定义 getter/setter 同步属性与内部状态（例如
set value(v) { this._value = v; this.render(); }） - 触发自定义事件：使用
this.dispatchEvent(new CustomEvent('change', {detail: {...}}))，外部用addEventListener监听 - 暴露方法：如
reset()、validate()等，供JS脚本直接调用 - 支持
slot实现内容分发，让使用者把HTML片段“注入”到组件指定位置
在项目中实际使用
组件注册后，像普通HTML标签一样使用，支持服务端渲染（SSR）友好：
- 直接写入HTML：
<my-button label="提交"></my-button> - 动态创建：
document.createElement('my-input')，再设置属性或添加子节点 - 搭配模块系统：用
export导出类，按需导入；现代打包工具（Vite、Webpack）可自动处理 - 注意兼容性：Chrome、Firefox、Safari、Edge均支持，旧版IE不支持，需用 webcomponents.js 补丁
