Web Components 基础：Custom Elements 与 Shadow DOM

好的，各位程序猿、攻城狮、代码界的艺术家们，大家好！欢迎来到今天的“Web Components 奇妙之旅”！我是你们的向导，一位在代码丛林里摸爬滚打多年的老司机，今天就带大家深入探索 Web Components 的两大核心概念：Custom Elements（自定义元素）和 Shadow DOM（影子DOM）。

准备好了吗？系好安全带，咱们出发！🚀

一、Web Components：前端开发的乐高积木

想象一下，你正在用乐高积木搭建一座城堡。每一块积木都有特定的形状和功能，你可以随意组合它们，搭建出各种各样的结构。Web Components 就像前端开发的乐高积木，它允许我们将网页分解成一个个独立的、可复用的组件，最终用这些组件搭建出复杂的应用。

Web Components 是一套用于构建可重用 UI 组件的 Web 标准。它包含四个核心技术：

• Custom Elements (自定义元素): 定义新的 HTML 元素，让你可以创造自己的标签。
• Shadow DOM (影子 DOM): 将组件的内部结构隐藏起来，实现封装，避免样式冲突。
• HTML Templates (HTML 模板): 定义可重用的 HTML 片段，用于创建组件的结构。
• HTML Imports (HTML 导入): (已废弃) 用于导入 Web Components 定义。现在通常使用 ES Modules 来导入。

今天我们重点关注前两个：Custom Elements 和 Shadow DOM。

二、Custom Elements：创造属于你的 HTML 标签

还记得你第一次接触 HTML 的时候吗？<p>, <div>, <span>，这些都是浏览器内置的标签。但是，如果我想创造一个 <my-button> 标签呢？或者一个 <fancy-slider> 标签？

以前，这几乎是不可能的。但现在，有了 Custom Elements，一切皆有可能！你可以像创造乐高积木一样，创造属于你自己的 HTML 标签。

2.1 定义你的第一个自定义元素

首先，我们需要定义一个 JavaScript 类，这个类将继承 HTMLElement。然后，我们将使用 customElements.define() 方法来注册这个类，告诉浏览器我们的新标签是什么。

class MyButton extends HTMLElement {
  constructor() {
    super(); // 必须调用 super()
    this.innerHTML = '<button>Click Me!</button>';
  }
}

customElements.define('my-button', MyButton);

这段代码做了什么？

• 我们创建了一个名为 MyButton 的类，它继承了 HTMLElement。这是所有自定义元素的基础。
• 在 constructor 中，我们调用了 super()。这是必须的，它会调用父类的构造函数。
• 我们使用了 this.innerHTML 来设置按钮的 HTML 内容。
• 最后，我们使用 customElements.define() 方法注册了我们的自定义元素。第一个参数是标签名，必须包含一个短横线（-），这是为了避免与浏览器内置标签冲突。第二个参数是我们的类名。

现在，你可以在 HTML 中使用 <my-button> 标签了！

<my-button></my-button>

浏览器会渲染出一个带有 "Click Me!" 文本的按钮。🎉

2.2 自定义元素的生命周期

自定义元素有四个重要的生命周期回调函数：

方法名	触发时机
connectedCallback()	当元素被插入到 DOM 中时触发。这是初始化元素、添加事件监听器、获取属性值的理想时机。
disconnectedCallback()	当元素从 DOM 中移除时触发。这是清理资源、移除事件监听器的理想时机。
attributeChangedCallback(name, oldValue, newValue)	当元素的属性发生变化时触发。你需要使用 observedAttributes() 静态方法来声明需要观察的属性。
adoptedCallback()	当元素被移动到新的文档时触发。这通常在使用 document.adoptNode() 方法时发生。

让我们看一个例子，演示如何使用 connectedCallback() 和 disconnectedCallback()：

class MyTimer extends HTMLElement {
  constructor() {
    super();
    this.intervalId = null;
  }

  connectedCallback() {
    this.intervalId = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }

  disconnectedCallback() {
    clearInterval(this.intervalId);
  }
}

customElements.define('my-timer', MyTimer);

这个例子创建了一个显示当前时间的自定义元素。

• connectedCallback() 在元素被添加到 DOM 中时启动一个定时器，每秒更新元素的内容。
• disconnectedCallback() 在元素从 DOM 中移除时停止定时器，防止内存泄漏。

2.3 观察属性的变化

attributeChangedCallback() 方法让我们可以在元素的属性发生变化时执行一些操作。但是，我们需要先使用 observedAttributes() 静态方法声明需要观察的属性。

class MyGreeting extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
    this.innerHTML = 'Hello, ';
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.innerHTML = `Hello, ${newValue}!`;
    }
  }
}

customElements.define('my-greeting', MyGreeting);

这个例子创建了一个根据 name 属性显示问候语的自定义元素。

• observedAttributes() 方法返回一个数组，包含了需要观察的属性名。
• attributeChangedCallback() 方法在 name 属性发生变化时被调用，它会更新元素的内容。

现在，你可以这样使用 <my-greeting> 标签：

<my-greeting name="World"></my-greeting>
<my-greeting name="John"></my-greeting>

浏览器会分别显示 "Hello, World!" 和 "Hello, John!"。 🌍

三、Shadow DOM：封装你的组件

有了 Custom Elements，我们可以创建自己的 HTML 标签。但是，还有一个问题：样式冲突。如果我们创建一个 <my-button> 标签，它的样式可能会受到页面其他 CSS 规则的影响。这会导致组件的行为变得不可预测，难以维护。

Shadow DOM 就是为了解决这个问题而生的。它允许我们将组件的内部结构隐藏起来，创建一个独立的 DOM 树，与页面上的其他 DOM 树隔离。这意味着组件的样式不会受到页面其他 CSS 规则的影响，反之亦然。

3.1 创建一个 Shadow DOM

要在自定义元素中创建一个 Shadow DOM，我们可以使用 attachShadow() 方法。

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' }); // 创建 Shadow DOM
    shadow.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <div class="card">
        <h2>Card Title</h2>
        <p>Card Content</p>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

这个例子创建了一个带有 Shadow DOM 的 <my-card> 标签。

• attachShadow({ mode: 'open' }) 方法创建了一个 Shadow DOM，并将它附加到自定义元素上。mode 参数指定了 Shadow DOM 的模式。open 模式允许从 JavaScript 中访问 Shadow DOM 的内部结构。closed 模式则不允许。
• 我们使用 shadow.innerHTML 来设置 Shadow DOM 的 HTML 内容，包括 CSS 样式。

现在，<my-card> 标签的样式不会受到页面其他 CSS 规则的影响。即使页面上有一个 div.card 样式，也不会影响 <my-card> 标签的显示。😎

3.2 Shadow DOM 的优势

Shadow DOM 带来了以下优势：

• 封装性: 隐藏组件的内部结构，防止外部代码直接访问或修改。
• 样式隔离: 组件的样式不会受到页面其他 CSS 规则的影响，反之亦然。
• 可重用性: 可以安全地在不同的页面或应用中使用同一个组件，而不用担心样式冲突。
• 简化开发: 减少了 CSS 冲突的可能性，提高了开发效率。

四、Custom Elements + Shadow DOM：强强联合

Custom Elements 和 Shadow DOM 常常一起使用，它们是 Web Components 的核心组成部分。Custom Elements 负责定义新的 HTML 标签，Shadow DOM 负责封装组件的内部结构。

通过将两者结合起来，我们可以创建出独立的、可复用的 UI 组件，这些组件可以在任何 Web 应用中使用。

4.1 一个完整的例子

让我们创建一个更复杂的例子，演示如何使用 Custom Elements 和 Shadow DOM 创建一个可配置的按钮组件。

class MyFancyButton extends HTMLElement {
  static get observedAttributes() {
    return ['label', 'color'];
  }

  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  render() {
    const label = this.getAttribute('label') || 'Click Me';
    const color = this.getAttribute('color') || 'blue';

    this.shadow.innerHTML = `
      <style>
        button {
          background-color: ${color};
          color: white;
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
        }
      </style>
      <button>${label}</button>
    `;
  }
}

customElements.define('my-fancy-button', MyFancyButton);

这个例子创建了一个名为 <my-fancy-button> 的自定义元素，它有两个属性：

• label: 按钮上显示的文本。
• color: 按钮的背景颜色。

我们可以这样使用 <my-fancy-button> 标签：

<my-fancy-button label="Submit" color="green"></my-fancy-button>
<my-fancy-button label="Cancel" color="red"></my-fancy-button>
<my-fancy-button></my-fancy-button> <!-- 使用默认值 -->

浏览器会渲染出三个不同的按钮，每个按钮都有不同的文本和颜色。 🎨

五、Web Components 的未来

Web Components 是一项强大的技术，它正在改变我们构建 Web 应用的方式。越来越多的开发者开始使用 Web Components 来创建可重用的 UI 组件，提高开发效率，降低维护成本。

虽然 Web Components 已经存在一段时间了，但它仍然在不断发展和完善。随着 Web 标准的不断进步，Web Components 将会变得更加强大和易用。

5.1 框架与 Web Components

你可能会问：既然有了 Web Components，我们还需要 React、Vue、Angular 这些框架吗？

答案是：不一定。Web Components 可以与这些框架很好地配合使用。你可以使用 Web Components 来创建底层的 UI 组件，然后使用框架来管理应用的状态和逻辑。

事实上，许多框架都提供了对 Web Components 的支持。例如，React 允许你像使用普通 HTML 元素一样使用 Web Components。Vue 提供了 defineCustomElement 方法，让你可以在 Vue 组件中使用 Web Components。

5.2 Web Components 的挑战

虽然 Web Components 带来了许多好处，但它也存在一些挑战：

• 学习曲线: 学习 Web Components 需要掌握一些新的概念和 API。
• 生态系统: Web Components 的生态系统还不够完善，缺乏一些常用的组件库。
• SEO: 一些搜索引擎可能无法正确索引 Shadow DOM 中的内容。

但是，这些挑战正在逐渐被克服。随着 Web Components 的普及，越来越多的开发者开始贡献代码，创建组件库，解决 SEO 问题。

六、总结

今天我们一起探索了 Web Components 的两大核心概念：Custom Elements 和 Shadow DOM。

• Custom Elements 让我们能够创造自己的 HTML 标签。
• Shadow DOM 让我们能够封装组件的内部结构，实现样式隔离。

通过将两者结合起来，我们可以创建出独立的、可复用的 UI 组件，这些组件可以在任何 Web 应用中使用。

Web Components 是前端开发的未来。如果你想成为一名优秀的 Web 开发者，那么学习 Web Components 是必不可少的。

希望今天的讲座对你有所帮助。感谢大家的收听！ 🙏

七、练习题

为了巩固你今天所学的知识，我给你留几个练习题：

1. 创建一个自定义元素 <my-counter>，它显示一个数字，并有两个按钮：一个用于增加数字，一个用于减少数字。
2. 创建一个自定义元素 <my-list>，它接受一个数组作为属性，并使用 <ul> 和 <li> 标签渲染数组中的元素。
3. 创建一个自定义元素 <my-modal>，它显示一个模态框，并有一个关闭按钮。使用 Shadow DOM 来封装模态框的样式。

加油！相信你一定能完成这些练习题！ 🚀

八、资源推荐

• MDN Web Docs: Web Components
• WebComponents.org
• Lit: 一个用于构建 Web Components 的库。

希望这些资源能帮助你更深入地了解 Web Components。

祝大家编程愉快！ 💻