Web Components通过Custom Elements、Shadow DOM和HTML Templates实现组件化，支持自定义标签、样式隔离与模板复用，结合属性监听可实现响应式更新。
Web Components 是一套可以让开发者创建可重用、独立、封装良好的自定义 HTML 元素的技术。结合 JavaScript，它为前端组件化开发提供了一种原生的解决方案，无需依赖框架即可实现组件的封装与复用。
核心构成：三大技术基础
Web Components 由三个主要技术组成：
- Custom Elements：允许你定义自己的 HTML 标签，浏览器可以识别并实例化这些元素。
- Shadow DOM：提供一个隔离的 DOM 环境，确保组件内部的样式和结构不会被外部影响，也不会影响全局。
-
HTML Templates（ 和
）：用于声明组件的结构模板，延迟渲染直到被实例化。
这三项技术共同作用，让组件具备高内聚、低耦合的特性。
定义一个自定义元素
使用 customElements.define() 方法注册一个新标签。你需要继承 HTMLElement 或其子类来创建类。
立即学习“Java免费学习笔记（深入）”；
例如，创建一个名为
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const template = document.createElement('template');
template.innerHTML = `
默认标题
默认内容
`;
shadow.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-card', MyCard);
之后就可以在 HTML 中使用：
这是标题 这是主体内容
mallcloud商城下载mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
属性与响应式更新
为了让组件更具交互性，可以通过监听属性变化来更新 UI。
使用 static get observedAttributes() 定义需要监听的属性：
class MyCard extends HTMLElement {
static get observedAttributes() {
return ['title', 'theme'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
// 更新标题插槽或内部结构
const titleSlot = this.shadowRoot.querySelector('slot[name="title"]');
// 实际中可能需要更复杂的处理，比如重新渲染
}
if (name === 'theme') {
this.shadowRoot.querySelector('.card').style.background =
newValue === 'dark' ? '#333' : '#f9f9f9';
this.shadowRoot.querySelector('.card').style.color =
newValue === 'dark' ? '#fff' : '#000';
}
}
}
这样调用时传入属性即可触发变化：
...
封装与复用优势
Web Components 的最大价值在于真正的封装能力。由于 Shadow DOM 的存在，组件内的 CSS 不会泄露，外部样式也不会意外破坏组件布局。
你可以将组件打包成独立的 JS 文件，在多个项目中引入使用，甚至跨框架使用（React、Vue、Angular 都能嵌入原生 Web Components）。
例如发布到 npm 或通过模块脚本加载：
基本上就这些。JavaScript Web Components 提供了轻量、标准、持久的组件化路径，适合构建设计系统、UI 库或需要长期维护的项目。虽然生态工具不如框架丰富，但原生支持让它在未来更具潜力。
