JavaScript内核与高级编程之：`Web Components`：`Custom Elements`、`Shadow DOM`和`Templates`的底层实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是今天的讲师，咱们今天聊聊 Web Components，这个听起来有点高大上，但实际上特别接地气的东西。

说白了，Web Components 就是一个让你创造自定义 HTML 标签的工具包。你可以像搭积木一样，把 HTML、CSS 和 JavaScript 封装成一个个独立的、可复用的组件。就像乐高，各种各样的零件，你能拼成房子、汽车、甚至宇宙飞船。

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

Custom Elements (自定义元素): 定义新的 HTML 标签。
Shadow DOM (影子 DOM): 为组件创建独立的 DOM 树，隔离样式和行为。
Templates (模板): 定义组件的 HTML 结构。

咱们一个一个来，先从 Custom Elements 开始。

Custom Elements: 创造属于你的 HTML 标签

想象一下，如果 HTML 里能有 <my-fancy-button>、<product-card> 这样的标签，是不是很酷？ Custom Elements 就能让你梦想成真。

要创建一个 Custom Element，你需要：

定义一个 JavaScript 类： 这个类将代表你的自定义元素。
继承 HTMLElement 类： 这是所有自定义元素的基类。
使用 customElements.define() 方法注册你的元素： 告诉浏览器，这个标签你说了算。

// 1. 定义一个类，继承 HTMLElement
class MyFancyButton extends HTMLElement {
  constructor() {
    // 必须首先调用 super()
    super();

    // 创建一个 shadow DOM
    this.attachShadow({ mode: 'open' });

    // 创建一个按钮
    const button = document.createElement('button');
    button.textContent = 'Click Me!';

    // 将按钮添加到 shadow DOM
    this.shadowRoot.appendChild(button);
  }

  connectedCallback() {
    // 当元素被添加到 DOM 时调用
    console.log('MyFancyButton is connected to the DOM!');
  }

  disconnectedCallback() {
    // 当元素从 DOM 中移除时调用
    console.log('MyFancyButton is disconnected from the DOM!');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 当元素的属性发生改变时调用
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
  }

  static get observedAttributes() {
    // 返回一个数组，列出你想要监听的属性
    return ['color'];
  }
}

// 2. 使用 customElements.define() 注册元素
customElements.define('my-fancy-button', MyFancyButton);

这段代码做了什么？

class MyFancyButton extends HTMLElement { ... }: 定义了一个名为 MyFancyButton 的类，继承自 HTMLElement。这是必须的，否则浏览器会一脸懵逼。
constructor() { ... }: 构造函数，在元素创建时调用。这里我们创建了一个 Shadow DOM (后面会讲)和一个按钮，并把它添加到 Shadow DOM 中。
this.attachShadow({ mode: 'open' });: 创建 Shadow DOM。mode: 'open' 意味着你可以从外部访问 Shadow DOM。
connectedCallback() { ... }: 当元素被添加到 DOM 时调用。你可以放一些初始化代码在这里。
disconnectedCallback() { ... }: 当元素从 DOM 中移除时调用。可以放一些清理代码在这里。
attributeChangedCallback(name, oldValue, newValue) { ... }: 当元素的属性发生改变时调用。监听属性变化，可以实现更灵活的组件。
static get observedAttributes() { ... }: 返回一个数组，列出你想要监听的属性。只有在这里声明的属性，attributeChangedCallback 才会收到通知。
customElements.define('my-fancy-button', MyFancyButton);: 注册元素。第一个参数是元素的标签名 (必须包含一个连字符 -)，第二个参数是你的类。

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

<!DOCTYPE html>
<html>
<head>
  <title>My Fancy Button</title>
  <script src="my-fancy-button.js"></script>
</head>
<body>
  <my-fancy-button color="red"></my-fancy-button>
</body>
</html>

记得把 JavaScript 文件引入到 HTML 中。

几个注意事项：

标签名必须包含一个连字符 -: 这是为了避免与标准 HTML 标签冲突。
constructor() 中必须首先调用 super(): 这是 JavaScript 类继承的规则。
observedAttributes 是一个静态 getter 方法: 必须使用 static 关键字。

方法/属性	描述
`constructor()`	构造函数，在元素创建时调用。
`connectedCallback()`	当元素被添加到 DOM 时调用。
`disconnectedCallback()`	当元素从 DOM 中移除时调用。
`attributeChangedCallback()`	当元素的属性发生改变时调用。
`observedAttributes`	返回一个数组，列出你想要监听的属性。
`attachShadow()`	创建一个 Shadow DOM。

Shadow DOM: 组件的私人领地

Shadow DOM 是 Web Components 的核心之一。它允许你为组件创建一个独立的 DOM 树，与主文档的 DOM 树隔离。这意味着：

样式隔离： 组件的 CSS 不会影响到主文档，主文档的 CSS 也不会影响到组件。
行为隔离： 组件的 JavaScript 可以安全地操作 Shadow DOM，而不用担心与其他脚本冲突。

就像每个组件都有自己的私人领地，你可以随便折腾，而不用担心影响到其他人。

在上面的 MyFancyButton 例子中，我们使用了 this.attachShadow({ mode: 'open' }); 来创建一个 Shadow DOM。 mode: 'open' 意味着你可以从外部访问 Shadow DOM。如果设置成 mode: 'closed'，那么就完全封闭了，外部无法访问。

// 获取 Shadow DOM 的引用
const myButton = document.querySelector('my-fancy-button');
const shadowRoot = myButton.shadowRoot;

// 访问 Shadow DOM 中的元素
const button = shadowRoot.querySelector('button');

如果没有 Shadow DOM，你可能会遇到这样的问题：

<!DOCTYPE html>
<html>
<head>
  <title>Shadow DOM Example</title>
  <style>
    button {
      background-color: red; /* 全局样式，会影响所有按钮 */
    }
  </style>
</head>
<body>
  <button>Global Button</button>
  <my-fancy-button></my-fancy-button>
  <script>
    class MyFancyButton extends HTMLElement {
      constructor() {
        super();
        this.innerHTML = '<button>Fancy Button</button>';
      }
    }
    customElements.define('my-fancy-button', MyFancyButton);
  </script>
</body>
</html>

在这个例子中，全局的 button 样式会影响到 MyFancyButton 中的按钮，导致样式冲突。

但是，如果使用了 Shadow DOM：

<!DOCTYPE html>
<html>
<head>
  <title>Shadow DOM Example</title>
  <style>
    button {
      background-color: red; /* 全局样式，不会影响 Shadow DOM 中的按钮 */
    }
  </style>
</head>
<body>
  <button>Global Button</button>
  <my-fancy-button></my-fancy-button>
  <script>
    class MyFancyButton extends HTMLElement {
      constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = '<button>Fancy Button</button>';
      }
    }
    customElements.define('my-fancy-button', MyFancyButton);
  </script>
</body>
</html>

Shadow DOM 隔绝了全局样式，MyFancyButton 中的按钮不会受到影响。

Shadow DOM 的优势：

样式封装： 组件的样式不会泄露到外部，也不会受到外部样式的影响。
DOM 结构封装： 组件的 DOM 结构被隐藏起来，外部无法直接访问和修改。
避免命名冲突： 组件内部的 ID 和 class 名不会与外部冲突。

Shadow DOM 的局限：

SEO： 搜索引擎可能无法正确抓取 Shadow DOM 中的内容 (不过现在搜索引擎对 Shadow DOM 的支持越来越好)。
事件穿透： 某些事件 (例如 focus 和 blur) 可能不会穿透 Shadow DOM。

Templates: 组件的蓝图

Templates 允许你定义组件的 HTML 结构，然后通过 JavaScript 将其渲染到 Shadow DOM 中。使用 <template> 标签来定义模板。

<template id="my-fancy-button-template">
  <style>
    button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
  <button><slot>Click Me!</slot></button>
</template>

这个模板定义了一个按钮，并使用 <slot> 标签来定义一个插槽。插槽允许你从外部向组件传递内容。

现在，我们可以使用这个模板来创建 MyFancyButton：

class MyFancyButton extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({ mode: 'open' });

    // 获取模板
    const template = document.getElementById('my-fancy-button-template');

    // 克隆模板内容
    const content = template.content.cloneNode(true);

    // 将模板内容添加到 shadow DOM
    shadow.appendChild(content);
  }
}

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

这段代码做了什么？

document.getElementById('my-fancy-button-template');: 获取模板。
template.content.cloneNode(true);: 克隆模板内容。 cloneNode(true) 表示深拷贝，会复制所有子节点。
shadow.appendChild(content);: 将模板内容添加到 Shadow DOM。

现在，你就可以在 HTML 中使用 <my-fancy-button> 标签了，并且可以通过插槽传递内容：

<!DOCTYPE html>
<html>
<head>
  <title>My Fancy Button</title>
  <script>
    class MyFancyButton extends HTMLElement {
      constructor() {
        super();

        const shadow = this.attachShadow({ mode: 'open' });

        // 获取模板
        const template = document.getElementById('my-fancy-button-template');

        // 克隆模板内容
        const content = template.content.cloneNode(true);

        // 将模板内容添加到 shadow DOM
        shadow.appendChild(content);
      }
    }

    customElements.define('my-fancy-button', MyFancyButton);
  </script>
  <template id="my-fancy-button-template">
    <style>
      button {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
      }
    </style>
    <button><slot>Click Me!</slot></button>
  </template>
</head>
<body>
  <my-fancy-button>Submit</my-fancy-button>
</body>
</html>

<my-fancy-button>Submit</my-fancy-button> 中的 Submit 会替换模板中的 <slot>Click Me!</slot>，最终按钮上显示的是 "Submit"。

Templates 的优势：

代码重用： 可以定义多个组件共享的模板。
可维护性： 修改模板可以影响所有使用该模板的组件。
性能优化： 浏览器可以预编译模板，提高渲染性能。

Web Components 的底层实现

理解 Web Components 的底层实现有助于你更好地使用它。

Custom Elements 的底层实现：

浏览器维护一个自定义元素的注册表。当你调用 customElements.define() 时，浏览器会将你的类和标签名添加到注册表中。当浏览器解析 HTML 时，如果遇到一个未知的标签，它会查询注册表，看看是否已经注册了对应的自定义元素。如果找到了，浏览器会创建该元素的实例，并调用其生命周期回调函数 (例如 connectedCallback)。

Shadow DOM 的底层实现：

Shadow DOM 的实现依赖于浏览器提供的 Shadow Tree API。浏览器会为每个 Shadow DOM 创建一个独立的 DOM 树，并将其与主文档的 DOM 树隔离。样式和事件的传播也会受到限制，以确保组件的封装性。

Templates 的底层实现：

浏览器会将 <template> 标签的内容解析成一个 DocumentFragment 对象。 DocumentFragment 是一个轻量级的 DOM 节点，它可以包含多个子节点，但不会渲染到页面上。当你克隆模板内容时，实际上是在克隆 DocumentFragment 对象。

技术	底层实现
Custom Elements	浏览器维护一个自定义元素的注册表，当解析 HTML 时，会查询注册表，创建自定义元素实例并调用生命周期回调。
Shadow DOM	依赖于浏览器提供的 Shadow Tree API，为每个 Shadow DOM 创建独立的 DOM 树，并隔离样式和事件传播。
Templates	浏览器将 `<template>` 标签的内容解析成 DocumentFragment 对象，克隆模板内容实际上是在克隆 DocumentFragment 对象。

进阶技巧

属性和状态管理： 可以使用 attributeChangedCallback 监听属性变化，并使用 JavaScript 对象来管理组件的状态。
事件： 可以使用 CustomEvent 创建自定义事件，并在组件内部触发。
表单集成： 可以实现 formAssociated 接口，使你的自定义元素可以像标准的表单控件一样工作。
TypeScript： 使用 TypeScript 可以提高代码的可维护性和可读性。

总结

Web Components 是一个强大的工具，它可以让你创建可复用的、封装良好的组件。理解 Web Components 的核心概念 (Custom Elements, Shadow DOM, Templates) 和底层实现，可以帮助你更好地使用它，构建更健壮、更易于维护的 Web 应用。

好了，今天的讲座就到这里。希望大家有所收获！记得多多实践，才能真正掌握 Web Components。谢谢大家！

Custom Elements: 创造属于你的 HTML 标签

Shadow DOM: 组件的私人领地

Templates: 组件的蓝图

Web Components 的底层实现

进阶技巧

总结

发表回复 取消回复

发表回复取消回复