通过Web Components可创建不依赖框架的原生可复用按钮组件。利用自定义元素、Shadow dom和模板技术，实现样式隔离与行为封装，支持主题、状态控制及事件响应，提升前端开发效率与组件复用性。
在现代前端开发中，可复用、独立封装的 ui 组件是提升开发效率的关键。html5 提供了 Web Components 技术，让我们无需依赖框架就能创建自定义、可复用的 HTML 元素。本文通过实战方式，教你如何使用 Web Components 构建一个可复用的按钮组件。
什么是 Web Components？
Web Components 是一套浏览器原生支持的技术，主要包括：
- 自定义元素（Custom Elements）：定义新的 HTML 标签
- 影子 DOM（Shadow DOM）：封装样式和结构，避免全局污染
- HTML 模板（<template>）：声明可复用的 DOM 结构
这些技术结合使用，可以创建高度封装、样式隔离、行为独立的组件。
创建可复用的自定义按钮
我们来实现一个名为 <my-button> 的按钮组件，支持不同主题（如 primary、danger）、禁用状态，并具备点击反馈。
立即学习“前端免费学习笔记（深入）”；
1. 定义自定义元素类
首先创建一个继承自 HTMLElement 的类，在其中初始化影子 DOM 和内部结构。
class MyButton extends HTMLElement { constructor() { super(); // 创建影子根 this.attachShadow({ mode: 'open' }); } // 组件首次被插入 DOM 时调用 connectedCallback() { const type = this.getAttribute('type') || 'default'; const disabled = this.hasAttribute('disabled'); const content = this.textContent || this.getAttribute('text') || '按钮'; // 渲染按钮结构 this.shadowRoot.innerHTML = ` <style> .btn { padding: 8px 16px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .btn.primary { background-color: #007bff; color: white; } .btn.danger { background-color: #dc3545; color: white; } .btn.default { background-color: #f8f9fa; color: #212529; border: 1px solid #ced4da; } .btn:hover:not([disabled]) { opacity: 0.8; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; } </style> <button class="btn ${type}" ?disabled="${disabled}"> ${content} </button> `; // 绑定点击事件 const button = this.shadowRoot.querySelector('button'); button.addEventListener('click', () => { if (!disabled) { this.dispatchEvent(new CustomEvent('click', { bubbles: true })); } }); } // 监听属性变化 static get observedAttributes() { return ['type', 'disabled', 'text']; } attributeChangedCallback(attrName, oldValue, newValue) { if (oldValue !== newValue) { this.connectedCallback(); // 重新渲染 } } }
2. 注册自定义元素
使用 customElements.define() 注册新标签：
customElements.define('my-button', MyButton);
3. 在 HTML 中使用组件
注册完成后，就可以像普通 HTML 元素一样使用它：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>My Button Component</title> </head> <body> <my-button type="primary" text="提交"></my-button> <my-button type="danger">删除</my-button> <my-button disabled>不可点击</my-button> <script src="my-button.js"></script> <script> // 监听点击事件 document.querySelector('my-button').addEventListener('click', () => { alert('按钮被点击！'); }); </script> </body> </html>
优化建议与注意事项
为了让组件更健壮和易用，可以考虑以下几点：
- 避免频繁重渲染：在
attributeChangedCallback中只更新变化的部分，而不是整个结构 - 支持更多属性：比如添加
size（small/large）、loading状态等 - 使用模板元素：将 HTML 结构放在
<template>中预加载，提高性能 - 样式作用域保护：Shadow DOM 已经帮你做到这一点，确保外部样式不会影响组件
- 无障碍支持：添加 role、aria-disabled 等属性提升可访问性
总结
通过 Web Components 的自定义元素功能，我们可以创建真正原生、可复用、封装良好的按钮组件。这种方式不依赖任何框架，兼容现代浏览器，适合构建设计系统或跨项目共享 UI 组件。