前言
随着 Web 技术的不断发展和进步，我们可以通过浏览器在网页上实现更加复杂且丰富的交互效果。而在 Web 应用开发中，使用 Custom Elements 可以帮助我们创建独特的 HTML 元素，从而更加高效地实现页面交互和功能实现。
本文将介绍 Custom Elements 的基本概念，以及如何使用它构建高性能的 Web 应用程序，并提供示例代码说明。
Custom Elements 简介
Custom Elements 是 Web 标准中的一个 API，它可以帮助我们开发自定义的 HTML 元素。通过 Custom Elements，我们可以定义一个新的 HTML 元素，并封装它的样式和行为。
自定义元素是用来扩展 HTML 元素或者创建新的页面组件。自定义元素的定义使用了 ES6 的类和模块语法，这样可以更好的封装和组织代码。
Custom Elements 核心概念
在掌握 Custom Elements 基本概念前，建议先学习 Web Components 技术，这是 Custom Elements 的一个重要组成部分。
Custom Elements 有四个核心概念：
- CustomElementRegistry：自定义元素的注册表，可以通过该 API 注册自定义元素或查询自定义元素信息；
- HTMLElement：所有的自定义元素都是 HTMLElement 的子类，开发者可以在此基础上进行扩展；
- CustomElementConstructor：自定义元素的构造函数，在此构造函数中完成元素的初始化逻辑；
- Lifecycle callbacks：生命周期回调函数，包括 connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。
Custom Elements 的实践和应用
注册 Custom Elements
要注册一个 Custom Elements，可以使用 CustomElementRegistry 的 define() 方法。define() 方法接收两个参数，第一个参数是新元素的名称，第二个参数是一个类，它继承自 HTMLElement。
class MyElement extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define('my-element', MyElement);在这个示例中，我们创建了一个叫做 MyElement 的新元素，并且使用 window.customElements 对象将该元素注册到 CustomElementRegistry 上。
Custom Elements 的生命周期
在 Custom Elements 中，生命周期回调函数对于元素的生命周期非常重要。当我们定义了一个新的 Custom Elements 后，它的生命周期包含以下几个阶段：
- connectedCallback：元素第一次连接到文档 DOM 时调用。
- disconnectedCallback: 在元素从文档 DOM 中移除时调用。
- attributeChangedCallback：每当元素的一个属性被增加、移除或更改时调用。属性和修改前后的值会被传递给该函数。
- adoptedCallback: 元素从一个文档移动到另一个文档时调用。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------------- ------------
-
---------------------- -
-------------------- ---------------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
------------------------------------------ -----------在上例中，我们在 MyElement 中定义了四个生命周期回调函数，分别对应了上面所述的生命周期阶段。比如，当元素第一次连接到文档 DOM 时，connectedCallback() 函数会被调用。
自定义元素行为
Custom Elements 提供了丰富的功能，可以让我们创建非常复杂的交互场景。我们可以在一个自定义元素中封装一些行为，让这个自定义元素在特定的情况下呈现与众不同的表现。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------- - -----
---------- - ---
-
------------------- -
----- ------------ - --------------------------
---------------------------------- -- -
-- -------------------------------------- -
------------- - ------------------------
-
-----------------------------------------
------------------------------------- -- -- -
------------- - ------------------------
--------------------- ---- -- -------------------
---
---
-
-
------------------------------------------- ----------在这个示例中，我们创建了一个名为 Dropdown 的自定义元素，它封装了下拉菜单的行为。在 connectedCallback() 回调函数中，我们在构造函数中定义了一个 selected 属性，用于存储当前选中的菜单项。同时，我们遍历了所有的子元素，并将子元素的内容存储到 items 数组中。
自定义元素 registration 固然重要，但你也需要注意 class 的 import。自定义元素是一个类，和普通的 class 一样，你需要先加载 class 才能被 get 详情。
import './dropdown.js';
const dropdown = document.querySelector('my-dropdown');
console.log(dropdown);总结
Custom Elements 是 Web Components 的重要组成部分，可以帮助我们构建高性能的 Web 应用程序。在本文中，我们介绍了 Custom Elements 的基本概念、生命周期、自定义元素行为等相关知识。
随着 Web 技术的不断发展，Custom Elements 的使用也将越来越广泛。在开发 Web 应用程序时，应该充分利用 Custom Elements 的优势，开发出更加高效、优雅和实用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647055ad968c7c53b0e77053