Web 开发中常常需要定制化特殊的 HTML 元素，如日历组件、轮播图组件、面包屑组件等等。为了实现这些自定义元素，我们可以使用 Web Components 和其中的 Custom Elements。Custom Elements 允许开发者定义自己的 HTML 标签，将其封装成可重用的组件。本文将介绍如何使用 Custom Elements 构建可重用的 HTML 元素，并提供示例代码供读者参考。
Custom Elements 简介
Custom Elements 是 Web Components 标准中的一部分，是一种可以让开发者自定义 HTML 元素的技术。大致流程是：将一个普通的 HTML 元素扩展为一个具有特定功能的新元素。开发者可以在这个新元素内部通过 JavaScript 实现自定义的行为。
Web Components 标准包含四个主要技术：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。其中，Custom Elements 是最常用的技术之一。除了封装逻辑之外，Custom Elements 还能让开发者在思考问题时更加关注业务逻辑。另外，开发者还能够调用自定义元素，而不需要了解内部的实现逻辑，这样可以提高可维护性和可读性。
使用 Custom Elements 创建自定义元素
创建自定义元素主要有两步：继承 HTMLElement 类和注册元素。了解了这两步操作之后，我们就可以创建一个名为 MyElement 的自定义元素。
class MyElement extends HTMLElement { constructor() { super(); // 自定义元素的构造函数 } } window.customElements.define('my-element', MyElement);
在创建自定义元素时，我们需要先继承 HTMLElement 类，然后根据需要重写构造函数。在构造函数中可以添加自己的逻辑，如创建 Shadow DOM 树、添加事件监听器等等。完成构造函数的编写之后，我们就可以通过 window.customElements.define 将元素注册到浏览器内置的元素注册表中。在注册过程中，我们需要指定元素名称和元素类。
自定义元素名称需要遵守自定义元素规范。自定义元素名称必须包含短横线 "-"，且以字母开头，可以使用数字、字母和短横线。名称不区分大小写，但是建议使用全小写字母命名，并且保证名称在页面中唯一。
自定义元素的生命周期
自定义元素的生命周期分为以下四个阶段：创建（Created）、附加（Attached）、升级（Upgraded）和断开（Detached）。
首先，在创建（Created）阶段，Custom Elements 允许开发者为元素添加 Shadow DOM 和其他子元素。在这个阶段，我们可以为元素添加属性，如样式表和事件监听器。
其次，在附加（Attached）阶段，Custom Elements 将元素连接到文档流中。在这个阶段，我们可以执行一些在元素渲染到文档之前需要完成的操作，例如确定元素是否可见。
然后，在升级（Upgraded）阶段，Custom Elements 检测到元素被引用并且是首次渲染时，会自动升级元素。在这个阶段，开发者可以通过访问元素的 Shadow DOM 和属性，进行一些进一步的操作。
最后，在断开（Detached）阶段，Custom Elements 将元素移除文档流。在这个阶段，开发者可以完成一些资源的清理工作，例如释放一些内存和清理监听器等。
自定义元素的使用示例
现在我们已经了解了如何使用 Custom Elements 创建自定义元素，下面是一个示例代码，它实现了一个具有点击功能的自定义元素。
-- -------------------- ---- ------- -------- ----- ------------ ------- ----------- - ------------- - -------- ------------------------------ -- -- - ------------------------- --- - - -------------------------------------- -------------- --------- ----------------------------------展开代码
在上面的代码实例中，我们通过继承 HTMLElement 类创建一个 ClickElement 类，并在其中添加 click 事件监听器。最后，我们将这个 ClickElement 元素注册到浏览器内置的元素注册表中，其名称为 "click-element"。
在页面中使用这个自定义元素时，我们只需要在 HTML 中添加 <click-element> 标签即可。当用户单击这个元素时，"点击了自定义元素！" 就会在控制台中输出。
结语
通过本文的介绍，我们可以了解到如何使用 Custom Elements 创建可重用的 HTML 元素，并掌握了自定义元素的生命周期。在实际开发中，我们可以使用 Custom Elements 来构建更加易于维护和扩展的 Web 页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67920c69504e4ea9bd5e1d29
