Web Components 是一套原生支持创建可重用自定义元素的技术，包含 Custom Elements、Shadow DOM、HTML Templates 和依赖 ES Modules 的模块化机制。通过 customElements.define() 定义新标签，继承 HTMLElement 实现自主或内置扩展元素；Shadow DOM 提供样式与结构隔离，避免全局污染，支持插槽内容分发；HTML Templates 声明延迟渲染的模板结构，结合 实现灵活内容投影。该技术不依赖框架，适用于现代浏览器，适合构建高内聚、低耦合的 UI 组件库或跨框架微前端模块，提升复用性与维护性。
Web Components 是一套允许开发者创建可重用、独立、自定义 HTML 元素的技术标准，它让前端组件化开发更加原生和高效。JavaScript 组件开发中，Web Components 提供了无需依赖框架的解决方案，适用于任何现代浏览器环境。
核心构成：四大关键技术
Web Components 由四项主要技术组成，它们共同支撑起自定义元素的能力：
- Custom Elements：允许开发者定义新的 HTML 标签，并赋予其行为逻辑。
- Shadow DOM：提供封装能力，使组件内部结构与样式与页面其他部分隔离。
-
HTML Templates（ 和
）：用于声明组件的结构模板，延迟渲染直到被实例化。 - ES Modules：虽然不是 Web Components 的一部分，但在现代使用中常作为组件模块加载的基础。
Custom Elements：定义自己的 HTML 标签
通过 customElements.define() 方法可以注册一个自定义元素。该类需继承自 HTMLElement 或其子类。
有两种类型：
立即学习“Java免费学习笔记（深入）”；
-
Autonomous custom elements：完全独立的新标签，如
。 - 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，从而建立独立的作用域。
关键优势：
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。本平台提供EasyUI中文学习教程下载，需要的朋友们可以下载！
- 内部样式不会影响外部页面，避免全局污染。
- 外部 CSS 也无法穿透到组件内部（除非显式暴露）。
- 支持插槽（slot），实现内容分发。
推荐使用 mode: 'open' 便于调试；若需更高封装性可用 'closed'，但较少见。
HTML Templates 与 Slot 机制
是存放未渲染 DOM 结构的理想容器，只在需要时克隆使用。
示例模板：
默认内容
使用时：
卡片标题
这是主体内容。
基本上就这些。Web Components 让你用原生 JavaScript 构建高内聚、低耦合的 UI 组件，适合构建设计系统或跨框架使用的微前端模块。不复杂但容易忽略细节，比如生命周期回调、属性监听和升级问题，掌握后能大幅提升组件复用能力。
