【高频考点精讲】Web Components使用指南，如何创建可复用的自定义元素？

Web Components使用指南：如何创建可复用的自定义元素？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊Web Components这个前端领域的"乐高积木"——它能让你像搭积木一样构建可复用的自定义元素。想象一下，你开发了一个炫酷的按钮组件，不仅能在当前项目用，还能直接搬到下个项目，甚至分享给团队其他成员，这就是Web Components的魅力所在。

什么是Web Components？

Web Components实际上是一套浏览器原生支持的组件化方案，包含三个主要技术：

1. Custom Elements（自定义元素）：让你定义自己的HTML标签
2. Shadow DOM（影子DOM）：提供样式和标记的封装
3. HTML Templates（HTML模板）：定义可复用的标记结构

这三者组合起来，就能创造出真正独立、可复用的组件。不同于React或Vue的组件，Web Components是浏览器原生支持的，不依赖任何框架，这意味着你的组件可以在任何技术栈中使用——这才是真正的"一次编写，到处运行"。

实战：创建一个自定义按钮

让我们从最简单的例子开始——创建一个带特殊样式的按钮组件。这个按钮会有波纹点击效果，而且样式完全封装，不会影响页面其他元素。

// 定义一个波纹按钮组件 - 全栈老李
class RippleButton extends HTMLElement {
   
   
  constructor() {
   
   
    super();
    
    // 创建影子DOM，实现样式封装
    this.attachShadow({
   
    mode: 'open' });
    
    // 定义模板
    this.shadowRoot.innerHTML = `
      <style>
        button {
          position: relative;
          padding: 12px 24px;
          border: none;
          border-radius: 4px;
          background: #6200ee;
          color: white;
          font-size: 16px;
          cursor: pointer;
          overflow: hidden;
          transition: background 0.3s;
        }
        
        button:hover {
          background: #7c4dff;
        }
        
        .ripple {
          position: absolute;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.7);
          transform: scale(0);
          animation: ripple 0.6s linear;
          pointer-events: none;
        }
        
        @keyframes ripple {
          to {
            transform: scale(4);
            opacity: 0;
          }
        }
      </style>
      <button>
        <slot></slot>
      </button>
    `;
    
    // 获取按钮元素
    this.button = this.shadowRoot.querySelector('button');
    
    // 添加点击事件
    this.button.addEventListener('click', this.createRipple.bind(this));
  }
  
  createRipple(e) {
   
   
    const circle = document.createElement('span');
    const diameter = Math.max(this.button.clientWidth, this.button.clientHeight);
    const radius = diameter / 2;
    
    circle.style.width = circle.style.height = `${
     
     diameter}px`;
    circle.style.left = `${
     
     e.clientX - this