自定义 Web Components 开发指南：手把手教你实现 Custom Elements-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 技术的飞速发展，前端开发技术已经越来越成熟，也为前端开发者提供了更多的灵活性和自由度。其中，Web Components 技术就是现代前端开发领域中的一个热点话题。Web Components技术是 W3C 制定的标准，它能够将不同的 Web 应用组件化，允许开发者创建可重用、可扩展的自定义组件，以便在应用系统中极大地增加灵活性和模块化。

前置知识

在开始学习自定义 Web Components 之前，你需要具备以下基础知识：

熟练掌握 HTML、CSS 和 JavaScript；
了解 ES6 中的类、模块和继承等知识；
熟练掌握 DOM API，并了解 Shadow DOM 的相关知识。

如果你还不具备以上前置知识，可以先去学习一下。

开始自定义 Web Components

自定义元素

自定义元素是 Web Components 技术的核心之一，它允许开发者创建自定义 HTML 元素，并在页面上使用。自定义元素的命名必须以连字符（-）开头，并且必须包含至少一个单词字符。

注册自定义元素

要注册自定义元素，需要使用 customElements.define() 方法。该方法的参数包括元素名称、元素定义（Custom Elements）构造函数和一些选项。

下面是一个简单的注册自定义元素的例子：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = 'Hello, World!';
  }
}

window.customElements.define('my-element', MyElement);

customElements.define() 方法的第一个参数是我们要注册的元素名称。在这个例子中，我们注册了一个名为 my-element 的自定义元素。

第二个参数是元素定义的构造函数，这个构造函数是在构造自定义元素时调用的，它继承自 HTMLElement 类。

我们还可以传入一些选项，如：extends 选项，指定继承了哪个内置元素。

使用自定义元素

注册完自定义元素后，我们可以像使用普通 HTML 元素一样，在 HTML 中使用自定义元素。如下例所示：

<my-element></my-element>

在网页中插入这段 HTML 代码时，浏览器会调用 MyElement 构造函数来构造 <my-element> 元素，并将其插入到文档中。当元素被插入到文档中时，connectedCallback() 方法会被调用，从而创建元素内容。

Shadow DOM

Shadow DOM 是 Web Components 的关键特性之一，它允许开发者创建封装的 DOM 树。封装的 DOM 树有助于防止外部样式和脚本对自定义组件的干扰，提供更好的封装性和安全性。

创建 Shadow DOM

要创建 Shadow DOM，需要在自定义元素的构造函数中使用 this.attachShadow() 方法，该方法接受一个选项对象，其中 mode 属性的值可以是 open 或 closed。

下面是一个简单的创建 Shadow DOM 的例子：

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = '<h1>Hello, World!</h1>';
  }
}

window.customElements.define('my-element', MyElement);

在这个例子中，我们使用 this.attachShadow() 方法创建了一个实例的 Shadow DOM，并使用 mode 选项指定了 Shadow DOM 的访问级别。

Custom Elements 生命周期

Custom Elements 规范定义了一组生命周期回调函数，这些回调函数允许开发者在特定时刻执行代码。

constructor()

当一个自定义元素被构造时，这个回调函数就会被执行。

connectedCallback()

当自定义元素被插入到文档中时，这个回调函数被调用。

disconnectedCallback()

当自定义元素被从文档中删除时，这个回调函数被调用。

attributeChangedCallback()

当自定义元素的某个属性值被修改时，这个回调函数被调用。

下面是各个回调函数的详细介绍，以及使用示例。

constructor()

当一个自定义元素被构造时，这个回调函数就会被执行。

class MyElement extends HTMLElement {
  constructor() {
    super();
    // 初始化工作...
  }
}

window.customElements.define('my-element', MyElement);

在父类构造函数执行之后，自定义元素的构造函数被调用。这个回调函数可以用于执行一些初始化工作。

connectedCallback()

当自定义元素被插入到文档中时，这个回调函数被调用。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // 元素被插入到文档中时执行的代码...
  }
}

window.customElements.define('my-element', MyElement);

当自定义元素被插入到文档中时，connectedCallback() 方法就会被调用。在这个回调函数中，可以执行一些初始化代码。例如，添加事件监听器或执行异步操作。

disconnectedCallback()

当自定义元素被从文档中删除时，这个回调函数被调用。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  disconnectedCallback() {
    // 元素被删除时执行的代码...
  }
}

window.customElements.define('my-element', MyElement);

当自定义元素被从文档中删除时，disconnectedCallback() 方法就会被调用。在这个回调函数中，可以清除事件监听器、取消定时器、从 DOM 树中删除节点等操作。

attributeChangedCallback()

当自定义元素的某个属性值被修改时，这个回调函数被调用。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  static get observedAttributes() {
    return ['attr1', 'attr2'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 属性修改时执行的代码...
  }
}

window.customElements.define('my-element', MyElement);

observedAttributes 是一个静态属性，用于指定哪些属性需要被观察。在该数组中列出的属性名称，在被修改时会触发 attributeChangedCallback() 方法。

在 attributeChangedCallback() 回调函数中，会接受三个参数：

name：属性名称；
oldValue：属性修改前的值；
newValue：属性修改后的值。

示例

下面是一个完整的 Custom Elements 示例，演示了如何创建一个自定义元素、使用 Shadow DOM 和执行生命周期回调函数。

// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        h1 {
          color: red;
        }
      </style>
      <h1>Hello, World!</h1>
    `;
  }

  static get observedAttributes() {
    return ['name', 'age'];
  }

  connectedCallback() {
    console.log('connectedCallback');
  }

  disconnectedCallback() {
    console.log('disconnectedCallback');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`attributeChangedCallback: ${name} - ${oldValue} - ${newValue}`);
  }
}

window.customElements.define('my-element', MyElement);

在 HTML 文件中，可以使用下面的代码片段插入一个 <my-element> 元素。

<my-element name="Tom" age="18"></my-element>

当 <my-element> 元素被插入到网页中时，它会自动创建 Shadow DOM，并在 Shadow DOM 中插入一个红色标题。

可以在浏览器的控制台中查看 Custom Elements 生命周期回调函数的调用结果。

总结

通过本篇文章的学习，你应该掌握了 Web Components 开发的基本知识，包括自定义元素、Shadow DOM 和 Custom Elements 生命周期等。进一步的学习可以探索更多的 Web Components 相关技术，并尝试开发自己的自定义组件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651caed995b1f8cacd42d636