WebComponents通过Custom Elements、Shadow DOM和HTML Templates实现原生组件化。Custom Elements允许创建带行为的自定义标签，需继承HTMLElement并用customElements.define注册，标签名必须含短横线。Shadow DOM通过attachShadow提供隔离的DOM和样式，mode为'open'可访问shadowRoot，'closed'则不可，内部使用<slot>分发内容。HTML Templates定义不渲染的模板结构，可在JS中克隆插入。实际应用中需注意浏览器兼容性（IE不支持）、框架集成差异（React支持弱）、状态管理及构建优化，推荐使用Lit等工具提升开发效率。该技术适合跨框架复用和设计系统建设。
JavaScript组件化是现代前端开发的重要方向，而WebComponents作为浏览器原生支持的组件化标准，提供了一种不依赖框架、跨平台复用UI组件的方式。它由三项核心技术组成：Custom Elements、Shadow DOM 和 HTML Templates。通过这些技术，开发者可以创建封装良好、可复用、样式隔离的自定义HTML元素。
Custom Elements：定义自定义标签
Custom Elements 允许我们创建新的HTML标签，并为其绑定JavaScript类。浏览器会识别这些自定义标签，并执行对应的逻辑。
使用 customElements.define() 方法注册一个自定义元素，类需继承 HTMLElement 或其子类：
class MyButton extends HTMLElement {
connectedCallback() {
if (!this.rendered) {
this.innerHTML = ``;
this.rendered = true;
}
}
}
customElements.define('my-button', MyButton);
之后就可以在HTML中使用：<my-button></my-button>。注意：自定义标签名必须包含短横线（-），以避免与标准HTML标签冲突。
立即学习“Java免费学习笔记（深入）”；
Shadow DOM：实现样式和结构隔离
Shadow DOM 提供了一个独立的DOM树，与主文档DOM隔离，确保组件内部的样式不会影响外部，外部样式也不会污染组件内部。
在自定义元素中通过 attachShadow() 启用 Shadow DOM：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card { border: 1px solid #ccc; padding: 16px; }
</style>
<div class="card">
<slot></slot>
</div>
`;
}
}
customElements.define('my-card', MyCard);
使用 <slot> 可以插入外部内容，实现内容分发。mode 设置为 'open' 表示可通过 JavaScript 访问 shadowRoot，'closed' 则不可访问。
HTML Templates：预定义结构模板
HTML 的 <template> 标签允许我们定义一段不会立即渲染的DOM结构，可在JS中克隆并插入到页面或 Shadow DOM 中，适合用于组件模板。
示例：
<template id="my-modal-template">
<style>
.modal { background: white; border: 1px solid #ddd; }
</style>
<div class="modal">
<h3><slot name="title">默认标题</slot></h3>
<p><slot name="body"></slot></p>
<button id="close">关闭</button>
</div>
</template>
在自定义元素中使用：
const template = document.getElementById('my-modal-template');
class MyModal extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
实际应用建议
WebComponents 虽然原生支持，但在复杂项目中仍需注意以下几点：
- 兼容性：主流浏览器已支持，但旧版IE不支持，需评估目标用户环境
- 框架集成：React 对 Custom Elements 支持有限，Vue 和 Angular 支持较好
- 状态管理：组件内部状态需自行维护，可结合事件系统对外通信
- 构建优化：可使用工具如 Lit（轻量库）提升开发效率，简化模板和响应式更新
基本上就这些。WebComponents 提供了真正意义上的原生组件化能力，适合构建设计系统、跨框架组件库等场景。不复杂但容易忽略细节，比如 slot 使用、生命周期控制和样式作用域。掌握后，能写出更干净、可复用的UI代码。
