Web Components 详解：从 Shadow DOM 到自定义元素，一文搞懂浏览器原生组件体系-北京尧图网络

Web Components 详解从 Shadow DOM 到自定义元素一文搞懂浏览器原生组件体系Web Components 不是某个框架而是一组浏览器原生 API。它让开发者可以像使用video、input一样创建自己的 HTML 元素比如my-card、user-avatar。它的最大价值在于不依赖框架也能封装组件。无论项目用 React、Vue、Angular还是纯原生开发Web Components 都能复用。Web Components 由哪几部分组成Web Components 主要依赖三个核心能力能力作用关键 APICustom Elements定义自定义元素customElements.define()Shadow DOM封装样式和 DOM 结构attachShadow()HTML Templates提供可复用的模板template、slot它们可以单独使用但组合起来才能发挥完整威力。自定义元素 Custom Elements自定义元素允许你注册一个新的 HTML 标签。classMyButtonextendsHTMLElement{constructor(){super();this.innerHTMLbutton点击我/button;}}customElements.define(my-button,MyButton);使用时直接写my-button/my-button注意自定义元素名称必须包含连字符-例如my-button、user-card不能叫mybutton。这是为了避免和浏览器原生元素冲突。Shadow DOM真正的封装能力Shadow DOM 是 Web Components 最重要的部分。它让组件内部 DOM 和样式与外部隔离。classMyCardextendsHTMLElement{constructor(){super();constshadowthis.attachShadow({mode:open});shadow.innerHTMLstyle .card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; } /style div classcard slot nametitle默认标题/slot slot默认内容/slot /div;}}customElements.define(my-card,MyCard);使用方式my-cardspanslottitle卡片标题/spanp这是卡片内容/p/my-card这里有两个关键点attachShadow()创建影子 DOMslot允许外部插入内容。Shadow DOM 内部的样式不会影响外部外部样式也不会轻易污染内部。这种隔离能力正是组件库封装中最需要的。生命周期方法自定义元素有一套完整生命周期classMyElementextendsHTMLElement{connectedCallback(){// 元素被插入 DOM 时触发}disconnectedCallback(){// 元素从 DOM 移除时触发}adoptedCallback(){// 元素被移动到另一个 document 时触发}attributeChangedCallback(name,oldValue,newValue){// 监听的属性发生变化时触发}}如果需要监听属性变化还要配合observedAttributesstaticgetobservedAttributes(){return[title,disabled];}属性与事件通信组件内部可以通过属性接收数据gettitle(){returnthis.getAttribute(title);}settitle(value){this.setAttribute(title,value);}组件向外通信则推荐使用事件this.dispatchEvent(newCustomEvent(change,{detail:{value:hello},bubbles:true}));外部监听方式document.querySelector(my-input).addEventListener(change,(e){console.log(e.detail.value);});和现代框架怎么配合Web Components 可以和 React、Vue 等框架混合使用。Vue 3 对 Web Components 支持较好可以直接注册import{defineCustomElement}fromvue;importMyComponentfrom./MyComponent.ce.vue;constMyElementdefineCustomElement(MyComponent);customElements.define(my-component,MyElement);React 使用时需要注意属性传递和事件绑定方式例如onChange不会自动映射到 Web Component 的change事件通常需要手动绑定。适用场景Web Components 特别适合这些场景跨框架复用组件设计系统、组件库底层封装微前端中的独立模块浏览器插件、低代码平台、后台系统需要长期维护且不绑定框架的基础能力。它不一定适合所有业务组件。如果项目已经深度依赖 React 或 Vue普通业务组件继续用框架写法会更高效。但如果你希望组件脱离框架生命周期、长期稳定复用Web Components 是非常值得掌握的能力。小结Web Components 并不是要取代 React、Vue而是补齐浏览器原生组件化能力。掌握它之后你会更清楚组件封装的本质DOM 隔离、样式隔离、属性通信、事件通信和生命周期管理。发布时可以在 CSDN 和掘金都加上标签Web Components、前端、组件化、Shadow DOM、自定义元素。如果准备做系列专栏下一篇可以写《Web Components TypeScript 实战封装一个通用按钮组件》技术深度和收藏率都会更高。

Web Components 详解：从 Shadow DOM 到自定义元素，一文搞懂浏览器原生组件体系

相关推荐

DeepSeek Harness桌面端深度解析：工作区、插件与多模型路由实战

Javaweb校园志愿者管理系统：可运行、可修改、可上线的三层架构实战

AI Native研发范式落地手册：从项目宪法到多Agent编排的工程实践

更多资讯

YOLO11自定义网络使用AdamW训练报错，换成SGD却正常：优化器兼容性与参数分组排查

分块真相：如何定义RAG的检索基本单元

SSE轻松实现服务端推送，比WebSocket更简单

贵州智算中心油机降噪工程商怎么筛选？附 2026 项目指标核查清单

ponytail插件与skill实战：从安装到工作流自动化

pstack的thermo-nuclear-code-quality-review：终极可维护性审计详解

今日更新

基于sEMG与IMU的手语手势识别：从数据采集到实时部署避坑指南

装配车间MES落地指南：SimpleMES工单流转、BOM与齐套检查实战

AI获客怎样减少重复线索？意客AI的原文复用与版本筛选

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？