WebComponents通过Custom Elements、Shadow DOM和HTML Templates实现原生组件化。Custom Elements允许创建带行为的自定义标签，需继承HTMLElement并用customElements.define注册，标签名必须含短横线。Shadow DOM通过attachShadow提供隔离的DOM和样式，mode为'open'可访问shadowRoot，'closed'则不可，内部使用分发内容。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中使用：
Shadow DOM：实现样式和结构隔离
Shadow DOM 提供了一个独立的DOM树，与主文档DOM隔离，确保组件内部的样式不会影响外部，外部样式也不会污染组件内部。
在自定义元素中通过 attachShadow() 启用 Shadow DOM：
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
`;
}
}
customElements.define('my-card', MyCard);
使用
HTML Templates：预定义结构模板
HTML 的 标签允许我们定义一段不会立即渲染的DOM结构，可在JS中克隆并插入到页面或 Shadow DOM 中，适合用于组件模板。
示例：
在自定义元素中使用：
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（轻量库）提升开发效率，简化模板和响应式更新
主流浏览器已支持，但旧版IE不支持，需评估目标用户环境基本上就这些。WebComponents 提供了真正意义上的原生组件化能力，适合构建设计系统、跨框架组件库等场景。不复杂但容易忽略细节，比如 slot 使用、生命周期控制和样式作用域。掌握后，能写出更干净、可复用的UI代码。
