JavaScript中的Web Components与自定义元素

描述
Web Components是一套浏览器原生支持的组件化技术，允许开发者创建可重用的自定义HTML元素。它主要由三个关键技术组成：Custom Elements（自定义元素）、Shadow DOM（影子DOM）和HTML Templates（HTML模板）。今天我们将重点讲解Custom Elements，这是Web Components的核心。

知识点讲解

1. 什么是自定义元素？
自定义元素让开发者能够定义自己的HTML标签，这些标签具有与原生标签相似的特性（如属性、方法、生命周期等）。比如你可以创建<my-button>或<user-card>这样的元素。

2. 自定义元素的两种类型

• 自主定制元素：完全独立的元素，继承自HTMLElement基类
• 自定义内置元素：扩展已有的HTML元素（如<button>），继承自特定元素类

3. 创建自定义元素的步骤

步骤1：定义元素类

class MyButton extends HTMLElement {
  constructor() {
    super(); // 必须首先调用super()
    
    // 创建元素内容
    this.textContent = '点击我';
    this.style.backgroundColor = 'blue';
    this.style.color = 'white';
    this.style.padding = '10px';
  }
}

步骤2：注册自定义元素

// 参数1：元素名称（必须包含连字符）
// 参数2：元素类
customElements.define('my-button', MyButton);

步骤3：在HTML中使用

<my-button></my-button>

4. 生命周期回调
自定义元素有4个重要的生命周期方法：

class MyElement extends HTMLElement {
  constructor() {
    super();
    console.log('构造函数被调用');
  }

  connectedCallback() {
    // 元素被插入到DOM时调用
    console.log('元素被添加到页面');
  }

  disconnectedCallback() {
    // 元素从DOM移除时调用
    console.log('元素从页面移除');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 元素属性变化时调用
    console.log(`属性 ${name} 从 ${oldValue} 变为 ${newValue}`);
  }

  adoptedCallback() {
    // 元素被移动到新文档时调用
    console.log('元素被移动到新文档');
  }
}

5. 观察属性变化
要让attributeChangedCallback工作，需要定义观察的属性列表：

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['color', 'size']; // 观察这些属性
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'color') {
      this.style.color = newValue;
    }
  }
}

6. 完整示例：创建用户卡片组件

class UserCard extends HTMLElement {
  static get observedAttributes() {
    return ['name', 'avatar', 'email'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // 创建Shadow DOM
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const name = this.getAttribute('name') || '匿名用户';
    const avatar = this.getAttribute('avatar') || 'default-avatar.jpg';
    const email = this.getAttribute('email') || '';

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          border-radius: 8px;
          padding: 16px;
          max-width: 300px;
          font-family: Arial, sans-serif;
        }
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .name {
          font-size: 18px;
          margin: 10px 0;
        }
        .email {
          color: #666;
          font-size: 14px;
        }
      </style>
      <div class="card">
        <img src="${avatar}" alt="${name}" class="avatar">
        <div class="name">${name}</div>
        <div class="email">${email}</div>
        <slot></slot> <!-- 插槽，用于插入子内容 -->
      </div>
    `;
  }
}

// 注册组件
customElements.define('user-card', UserCard);

HTML中使用：

<user-card name="张三" avatar="zhangsan.jpg" email="zhangsan@example.com">
  <p>这是插槽内容</p>
</user-card>

7. 最佳实践

• 元素名称必须包含连字符（避免与原生元素冲突）
• 在connectedCallback中而不是构造函数中进行DOM操作
• 使用Shadow DOM来封装样式和行为
• 合理使用生命周期方法来管理资源

总结
自定义元素为前端开发提供了强大的组件化能力，让开发者可以创建真正意义上的可复用Web组件。结合Shadow DOM和HTML Templates，可以构建出样式和行为都完全封装的独立组件。