Web Components 是浏览器原生支持的、由 Custom Elements、Shadow DOM、HTML Templates 和 ES Modules 四部分组成的技术标准，用于创建封装良好、样式隔离、与框架无关的可复用自定义元素。
Web Components 是浏览器原生支持的一套技术标准，用来创建封装良好、可复用、与框架无关的自定义 HTML 元素。它不是某个库或框架的产物，而是由 HTML Templates、Custom Elements、Shadow DOM 和 ES Modules 共同组成的规范集合。
核心四部分：各司其职
Web Components 并非单一 API，而是四个关键技术的组合：
-
Custom Elements：定义新 HTML 标签（如
- Shadow DOM：为元素提供独立的 DOM 树和样式作用域，实现真正的样式隔离
-
HTML Templates（
）：声明不立即渲染的结构片段，供后续克隆使用 - ES Modules：支持以模块方式导入/导出组件，便于组织和复用
创建一个可复用的自定义元素（示例）
下面是一个带默认文本、点击计数、样式隔离的
// counter-button.js
class CounterButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM（自动开启样式隔离）
const shadow = this.attachShadow({ mode: 'open' });
// 定义模板结构（可提前写在 zuojiankuohaophpcntemplateyoujiankuohaophpcn 中，这里直接构建）
const template = document.createElement('template');
template.innerHTML = `
zuojiankuohaophpcnstyleyoujiankuohaophpcn
button { background: #007bff; color: white; border: none; padding: 8px 16px; }
.count { margin-left: 8px; font-weight: bold; }
zuojiankuohaophpcn/styleyoujiankuohaophpcn
zuojiankuohaophpcnbuttonyoujiankuohaophpcn
zuojiankuohaophpcnslot name="label"youjiankuohaophpcnClick mezuojiankuohaophpcn/slotyoujiankuohaophpcn
zuojiankuohaophpcnspan class="count"youjiankuohaophpcn0zuojiankuohaophpcn/spanyoujiankuohaophpcn
zuojiankuohaophpcn/buttonyoujiankuohaophpcn
`;
// 克隆模板内容到 Shadow DOM
shadow.appendChild(template.content.cloneNode(true));
// 初始化计数器状态
this.count = 0;
this.$button = shadow.querySelector('button');
this.$countEl = shadow.querySelector('.count');
/
/ 绑定事件
this.$button.addEventListener('click', () => {
this.count++;
this.$countEl.textContent = this.count;
// 可选：派发自定义事件，供外部监听
this.dispatchEvent(new CustomEvent('count-change', { detail: this.count }));
});}
// 属性变更时触发（需配合 static get observedAttributes()）
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'initial' && newValue !== oldValue) {
this.count = parseInt(newValue) || 0;
this.$countEl.textContent = this.count;
}
}
static get observedAttributes() {
return ['initial'];
}
}
// 向浏览器注册自定义元素（必须是短横线命名）
customElements.define('counter-button', CounterButton);
使用方式很简单：
Reset
为什么它真正“可复用”？
关键在于三点隔离与标准化：
/ 绑定事件
this.$button.addEventListener('click', () => {
this.count++;
this.$countEl.textContent = this.count;
// 可选：派发自定义事件，供外部监听
this.dispatchEvent(new CustomEvent('count-change', { detail: this.count }));
});-
样式不泄漏：Shadow DOM 内的 CSS 不影响页面其他部分，外部样式也无法穿透进来（除非显式使用
::part或::theme） - DOM 不污染：内部结构完全隐藏，外部只能通过 slot、属性、方法和事件交互
- 无需框架依赖：可在纯 HTML、React、Vue、Svelte 项目中直接使用——只要浏览器支持（Chrome/Firefox/Safari/Edge 均已全面支持）
实用建议与注意事项
想写出健壮的 Web Component，注意这些细节：
- 自定义标签名必须包含短横线（如
my-card），避免与未来 HTML 标准冲突 - 生命周期钩子（
connectedCallback/disconnectedCallback）适合做资源绑定与清理 - 属性操作尽量用
this.setAttribute()触发attributeChangedCallback，而非直接改对象属性 - 若需响应式更新 UI，手动更新 DOM 节点（Web Components 本身不提供数据绑定机制）
- 可通过
export default CounterButton导出类，配合import按需加载
基本上就这些。它不复杂，但容易忽略 Shadow DOM 的边界和生命周期时机。写得规范一点，一个组件就能跨项目、跨框架长期复用。
