Web Components 是一套原生支持创建可重用自定义元素的技术，包含 Custom Elements、Shadow DOM、HTML Templates 和依赖 ES Modules 的模块化机制。通过 customElements.define() 定义新标签，继承 HTMLElement 实现自主或内置扩展元素；Shadow DOM 提供样式与结构隔离，避免全局污染，支持插槽内容分发；HTML Templates 声明延迟渲染的模板结构，结合 <slot> 实现灵活内容投影。该技术不依赖框架，适用于现代浏览器，适合构建高内聚、低耦合的 UI 组件库或跨框架微前端模块，提升复用性与维护性。
Web Components 是一套允许开发者创建可重用、独立、自定义 HTML 元素的技术标准，它让前端组件化开发更加原生和高效。JavaScript 组件开发中，Web Components 提供了无需依赖框架的解决方案，适用于任何现代浏览器环境。
核心构成：四大关键技术
Web Components 由四项主要技术组成，它们共同支撑起自定义元素的能力：
- Custom Elements：允许开发者定义新的 HTML 标签，并赋予其行为逻辑。
- Shadow DOM：提供封装能力，使组件内部结构与样式与页面其他部分隔离。
- HTML Templates（<template> 和 <slot>）：用于声明组件的结构模板，延迟渲染直到被实例化。
- ES Modules：虽然不是 Web Components 的一部分，但在现代使用中常作为组件模块加载的基础。
Custom Elements：定义自己的 HTML 标签
通过 customElements.define() 方法可以注册一个自定义元素。该类需继承自 HTMLElement 或其子类。
有两种类型：
立即学习“Java免费学习笔记（深入）”；
- Autonomous custom elements：完全独立的新标签，如 <my-button>。
- Customized built-in elements：基于已有 HTML 元素扩展，例如继承自 HTMLButtonElement 的增强按钮。
示例代码：
class MyCard extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-card-template');
const content = template.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(content);
}
connectedCallback() {
console.log('组件已插入页面');
}
}
customElements.define('my-card', MyCard);
Shadow DOM：实现样式与结构隔离
调用 this.attachShadow({ mode: 'open' }) 可为自定义元素挂载 Shadow Root，从而建立独立的作用域。
关键优势：
- 内部样式不会影响外部页面，避免全局污染。
- 外部 CSS 也无法穿透到组件内部（除非显式暴露）。
- 支持插槽（slot），实现内容分发。
推荐使用 mode: 'open' 便于调试；若需更高封装性可用 'closed'，但较少见。
HTML Templates 与 Slot 机制
<template> 是存放未渲染 DOM 结构的理想容器，只在需要时克隆使用。
<slot> 实现“内容投影”，允许用户在使用组件时传入自定义内容。
示例模板：
<template id="my-card-template">
<style>
.card { border: 1px solid #ccc; padding: 1em; }
</style>
<div class="card">
<slot name="title"></slot>
<slot>默认内容</slot>
</div>
</template>
使用时：
<my-card> <span slot="title"><h2>卡片标题</h2></span> 这是主体内容。 </my-card>
基本上就这些。Web Components 让你用原生 JavaScript 构建高内聚、低耦合的 UI 组件，适合构建设计系统或跨框架使用的微前端模块。不复杂但容易忽略细节，比如生命周期回调、属性监听和升级问题，掌握后能大幅提升组件复用能力。
