Web Components 与 Shadow DOM 详解

Web Components 概述

Web Components 是一套不同的技术集合，允许开发者创建可重用的自定义元素，将功能封装在标准 HTML 元素之外。这一概念旨在解决前端组件化和代码复用的问题，是浏览器原生支持的组件化解决方案。

核心技术

Web Components 主要由三种核心技术组成：

1. Custom Elements（自定义元素）

允许开发者定义自己的 HTML 元素，包括特定行为和样式：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 组件逻辑
  }
  
  connectedCallback() {
    // 元素被添加到文档时调用
    this.innerHTML = '<p>Hello from custom element!</p>';
  }
  
  disconnectedCallback() {
    // 元素从文档中移除时调用
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    // 元素属性变化时调用
  }
}
 
// 注册自定义元素
customElements.define('my-component', MyComponent);

使用方式：

<my-component></my-component>

2. Shadow DOM（影子 DOM）

提供了一种封装元素内部结构的方法，使其与文档的主 DOM 树隔离：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 创建 Shadow DOM
    const shadow = this.attachShadow({mode: 'open'});
    
    // 添加内容到 Shadow DOM
    const wrapper = document.createElement('div');
    wrapper.textContent = 'Hello Shadow DOM';
    
    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
      div { 
        padding: 10px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

3. HTML Templates（HTML 模板）

使用 <template> 和 <slot> 元素定义可复用的 HTML 结构：

<template id="my-template">
  <style>
    .container { 
      padding: 10px;
      border: 1px solid #ddd;
    }
  </style>
  <div class="container">
    <slot></slot>
  </div>
</template>
 
<script>
class TemplatedComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    
    // 获取模板内容
    const template = document.getElementById('my-template');
    const templateContent = template.content;
    
    // 克隆模板内容到 Shadow DOM
    shadow.appendChild(templateContent.cloneNode(true));
  }
}
 
customElements.define('templated-component', TemplatedComponent);
</script>

使用方式：

<templated-component>
  这里的内容将被插入到模板的 slot 中
</templated-component>

Shadow DOM 深入解析

Shadow DOM 是 Web Components 中最强大的特性之一，它提供了创建独立 DOM 树的能力，这些树可以附加到元素上但不会出现在主文档 DOM 中。

主要特性

1. 封装性

Shadow DOM 最重要的特性是封装，它可以隐藏组件的内部实现：

// 创建一个带有 Shadow DOM 的自定义元素
class CustomButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    
    // 这些样式只会影响 Shadow DOM 内部
    const style = document.createElement('style');
    style.textContent = `
      button {
        background: blue;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
      }
    `;
    
    const button = document.createElement('button');
    button.textContent = 'Click me';
    
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}
 
customElements.define('custom-button', CustomButton);

2. 样式隔离

外部样式不会影响 Shadow DOM 内部的元素，Shadow DOM 内的样式也不会泄漏到外部：

<!-- 外部样式不会影响 Shadow DOM 内部 -->
<style>
  button { background: red; }  /* 不会影响 Shadow DOM 中的按钮 */
</style>
 
<custom-button></custom-button>

3. 插槽使用

使用 <slot> 元素可以在 Shadow DOM 中创建内容插入点：

class CardComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    
    shadow.innerHTML = `
      <style>
        .card { 
          border: 1px solid #ccc; 
          padding: 10px;
          margin: 10px;
        }
        .header { font-weight: bold; border-bottom: 1px solid #eee; }
        .footer { border-top: 1px solid #eee; font-size: 0.8em; }
      </style>
      <div class="card">
        <div class="header">
          <slot name="header">默认标题</slot>
        </div>
        <div class="content">
          <slot>默认内容</slot>
        </div>
        <div class="footer">
          <slot name="footer">默认底部</slot>
        </div>
      </div>
    `;
  }
}
 
customElements.define('custom-card', CardComponent);

使用示例：

<custom-card>
  <h2 slot="header">卡片标题</h2>
  <p>这是主要内容</p>
  <div slot="footer">底部内容</div>
</custom-card>

Web Components 的重要性

为什么需要 Web Components？

1. 隔离性

CSS 样式隔离，避免全局样式污染
JavaScript 作用域隔离，减少命名冲突
DOM 结构隔离，防止外部操作修改内部结构

2. 封装性

隐藏实现细节，提供清晰的 API
组件内部变更不影响外部使用
防止外部干扰

3. 可复用性

创建独立、自包含的组件
方便在不同项目中共享和重用
提高代码维护性和测试便利性

在现代框架中的应用

即使在 React、Vue、Angular 等框架流行的今天，Web Components 仍然具有重要价值：

提供跨框架兼容的组件
作为微前端架构的基础
创建真正可移植的 UI 组件库

在 Ionic 中的应用

Ionic 框架广泛使用 Web Components 和 Shadow DOM 来实现其跨平台组件库：

组件样式一致性

<ion-button>
  <!-- 内部使用 Shadow DOM 确保按钮样式不受外部影响 -->
  <button class="button-native">
    <slot></slot>
  </button>
</ion-button>

灵活的插槽系统

<ion-item>
  <ion-label slot="start">标签</ion-label>
  <ion-input slot="end"></ion-input>
</ion-item>

跨框架兼容

Ionic 组件可以在 React、Angular、Vue 等框架中使用，保持一致的行为和外观：

// React 中使用
import { IonButton, IonContent } from '@ionic/react';
 
function App() {
  return (
    <IonContent>
      <IonButton>Click Me</IonButton>
    </IonContent>
  );
}

<!-- Vue 中使用 -->
<template>
  <ion-content>
    <ion-button>Click Me</ion-button>
  </ion-content>
</template>

最佳实践

设计原则

遵循单一职责原则，每个组件只做一件事
提供清晰的 API 和文档
避免对外部环境的假设

性能考虑

避免在自定义元素中过度使用 Shadow DOM
合理使用事件委托
适当时机进行懒加载

可访问性

确保自定义组件支持键盘导航
添加适当的 ARIA 属性
测试屏幕阅读器兼容性

🪴qql1's digital garden

探索

Web Components与Shadow DOM详解