摘要在 React、Vue 等框架百花齐放的今天Web Components 作为浏览器原生支持的组件化方案正悄然回归。本文将带你从零开始使用原生技术栈构建可复用的 Web Components让你的组件真正的一次编写到处运行。一、为什么要学 Web Components前端框架的更新换代速度令人眼花缭乱jQuery → Angular → React → Vue → Svelte...Options API → Composition APIClass Components → Function Components → Hooks问题来了当你精心封装了一个 React 组件如何在 Vue 项目中复用Web Components 给出了答案 ——浏览器原生组件化不依赖任何框架真正的跨框架复用。Web Components 的三大核心技术作用Custom Elements定义新的 HTML 标签Shadow DOM封装组件内部结构和样式HTML Templates复用 HTML 模板二、快速入门你的第一个 Custom Element2.1 基础示例// user-card.js class UserCard extends HTMLElement { constructor() { super(); // 创建 Shadow DOM const shadow this.attachShadow({ mode: open }); // 获取属性 const name this.getAttribute(name) || 匿名用户; const avatar this.getAttribute(avatar) || default-avatar.png; // 渲染内容 shadow.innerHTML style .card { display: flex; align-items: center; padding: 16px; border-radius: 8px; background: #f5f5f5; font-family: -apple-system, sans-serif; } .avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 12px; } .name { font-weight: 600; color: #333; } /style div classcard img classavatar src${avatar} alt${name} span classname${name}/span /div ; } } // 注册自定义元素标签名必须包含连字符 customElements.define(user-card, UserCard);HTML 中使用!DOCTYPE html html head script srcuser-card.js/script /head body user-card name张三 avatarhttps://example.com/avatar.jpg /user-card user-card name李四/user-card /body /html小贴士自定义标签名必须包含连字符如user-card这是为了与标准 HTML 标签区分。三、进阶实战带交互的组件3.1 实现一个可折叠面板// collapse-panel.js class CollapsePanel extends HTMLElement { constructor() { super(); this.attachShadow({ mode: open }); this.isOpen false; } static get observedAttributes() { return [title, open]; } attributeChangedCallback(name, oldValue, newValue) { if (name open) { this.isOpen newValue ! null; this.render(); } if (name title) { this.render(); } } connectedCallback() { this.render(); this.shadowRoot.querySelector(.header).addEventListener(click, () { this.toggle(); }); } toggle() { this.isOpen !this.isOpen; if (this.isOpen) { this.setAttribute(open, ); } else { this.removeAttribute(open); } // 触发自定义事件 this.dispatchEvent(new CustomEvent(toggle, { detail: { isOpen: this.isOpen }, bubbles: true, composed: true })); } render() { const title this.getAttribute(title) || 展开/收起; this.shadowRoot.innerHTML style :host { display: block; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fafafa; cursor: pointer; user-select: none; } .header:hover { background: #f0f0f0; } .icon { transition: transform 0.3s ease; ${this.isOpen ? transform: rotate(180deg); : } } .content { max-height: ${this.isOpen ? 1000px : 0}; overflow: hidden; transition: max-height 0.3s ease; padding: ${this.isOpen ? 16px : 0 16px}; } /style div classheader span${title}/span span classicon▼/span /div div classcontent slot/slot /div ; // 重新绑定事件 this.shadowRoot.querySelector(.header).addEventListener(click, () { this.toggle(); }); } } customElements.define(collapse-panel, CollapsePanel);3.2 使用示例collapse-panel title点击展开详情 open p这里是折叠面板的内容可以包含任意 HTML 元素。/p ul li支持嵌套组件/li li支持任意内容/li li动画流畅/li /ul /collapse-panel script document.querySelector(collapse-panel).addEventListener(toggle, (e) { console.log(面板状态, e.detail.isOpen ? 展开 : 收起); }); /script四、生命周期钩子详解Web Components 提供了完整的生命周期管理class MyElement extends HTMLElement { // 1. 元素被创建时调用 constructor() { super(); console.log( 元素被创建); } // 2. 元素被插入到 DOM 时调用 connectedCallback() { console.log( 元素已挂载); // 适合在这里添加事件监听、发起网络请求 } // 3. 元素从 DOM 中移除时调用 disconnectedCallback() { console.log( 元素被移除); // 适合在这里清理定时器、移除事件监听 } // 4. 指定属性变化时调用 attributeChangedCallback(name, oldVal, newVal) { console.log( 属性 ${name} 从 ${oldVal} 变为 ${newVal}); } static get observedAttributes() { return [foo, bar]; } }生命周期流程图constructor ↓ connectedCallback ←────────────────┐ ↓ │ attributeChangedCallback (多次) │ ↓ │ disconnectedCallback ──────────────┘五、样式隔离与 CSS 变量5.1 Shadow DOM 的样式隔离Shadow DOM 内部的样式完全隔离不会影响外部shadow.innerHTML style /* 这里的 p 只影响组件内部 */ p { color: red; } /* :host 选择组件本身 */ :host { display: block; padding: 10px; } /* :host([active]) 匹配带 active 属性的组件 */ :host([active]) { background: yellow; } /style p我是组件内部的段落/p ;5.2 使用 CSS 变量实现主题定制虽然 Shadow DOM 隔离了样式但可以通过 CSS 变量让外部控制// 组件内部 shadow.innerHTML style :host { --primary-color: #1890ff; --border-radius: 4px; } .button { background: var(--primary-color); border-radius: var(--border-radius); } /style button classbuttonslot/slot/button ;/* 外部覆盖 */ my-button { --primary-color: #52c41a; --border-radius: 20px; }六、与主流框架的对比特性Web ComponentsReact/Vue学习成本低原生 API中需学框架跨框架复用✅ 原生支持❌ 需适配生态丰富度较少非常丰富性能优秀无运行时依赖框架优化服务端渲染较弱成熟方案适用场景适合使用 Web Components设计系统组件库跨框架复用微前端架构遗留系统渐进式改造简单的独立组件不适合使用 Web Components复杂的单页应用需要大量状态管理的场景对 SSR 要求高的项目七、兼容性处理Web Components 在现代浏览器中有良好支持但 IE11 和一些旧版浏览器需要 polyfillscript if (!window.customElements) { document.write(script srchttps://unpkg.com/webcomponents/webcomponentsjs2.8.0/webcomponents-bundle.js\/script); } /script浏览器支持情况特性ChromeFirefoxSafariEdgeCustom Elements546310.179Shadow DOM536310.179HTML Template26227.113八、总结Web Components 作为浏览器原生技术有其独特的价值✅优势真正的跨框架复用无运行时依赖体积小浏览器原生支持性能优秀未来标准长期稳定❌局限生态相对薄弱开发体验不如现代框架复杂状态管理困难SSR 支持有限建议设计系统/组件库可以优先考虑 Web Components复杂应用仍建议使用 React/Vue Web Components 的混合方案保持关注随着浏览器支持完善使用场景会越来越多