Web 组件化是前端开发的一个趋势，它有利于代码复用和维护，并且能够提高开发效率。为了实现组件化开发，HTML5 标准又新增了一个重要的特性——Custom Elements。
Custom Elements 提供了一个标准的方式来定义自定义 HTML 元素，并且可以在 JavaScript 中进行操作和管理。本文将对 Custom Elements 的核心 API 进行详解，并提供实例代码和实战指南。
CustomElementRegistry.register
CustomElementRegistry.register() 方法用于注册自定义元素。它接受两个参数，第一个参数是自定义元素的名称，第二个参数是一个对象，包含一些生命周期方法和属性。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- --------------
-
------------------- -
-- ------------
-
---------------------- -
-- --------------
-
----------------- -
-- ---------------
-
------------------------------ --------- --------- -
-- ------------
-
-
------------------------------------------ -----------上面的代码演示了如何使用 CustomElementRegistry.register() 方法来注册一个自定义元素。在注册的过程中，需要指定元素的名称和对应的类。
在类中，我们可以实现一些标准的生命周期方法来控制元素的行为。如 connectedCallback() 方法用于在元素插入文档时做一些初始化操作，disconnectedCallback() 方法用于在元素从文档中移除时清理资源，adoptedCallback() 方法用于在元素被移动到新文档时的操作，attributeChangedCallback() 方法用于在元素的属性值变化时做出响应。
HTMLElement
所有自定义元素的基类都是 HTMLElement。它是 HTML 5 标准中定义的一个 HTML 元素接口。
HTMLElement 定义了一些常用的属性和方法，包括：
- accessKey: 元素快捷键
- classList: 元素的 class 列表
- dataset: 元素的 data-* 属性的映射
- tabIndex: 元素的 tab 顺序
- click(): 触发元素的 click 事件
- focus(): 将焦点设置到元素上
- blur(): 从元素上移除焦点
我们可以在自定义元素类中继承 HTMLElement 来获得这些基础功能。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------- - ------
-
------------------- -
--------------------------------
-
------------------------------ --------- --------- -
-- ----- --- ------ -
---------------- -- ------- ---- ----------- -- --------------
-
-
-
------------------------------------------ -----------上面的代码演示了在自定义元素类中如何继承 HTMLElement，并使用其中的属性和方法。
Shadow DOM
Shadow DOM 是 Web 组件化的另一个重要特性。它允许我们在元素内部创建一个私有的 DOM 子树，并保护它免受外部的干扰。这对于实现 Web 应用中的复杂组件非常有用。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------- - ------------------------------
---------------------------------
----- ----- - --------------------------------
----------------- - -
-------- -
------- --- ----- -----
-------- -----
-
--
----- ------- - -------------------------------
------------ - ----------
---------------------------
-----------------------------
--------------------------------
-
------------------- -
---------------------- -- -------------
-
-
------------------------------------------ -----------上面的代码演示了如何在自定义元素中使用 Shadow DOM。在构造函数中，我们首先通过 this.attachShadow() 方法创建了一个 shadowRoot，并且指定了它的 mode 为 open 表示 shadowDom 是公开的。之后，我们创建了一个用于包装元素内容的 div 元素，包含了一个样式表和一个 slot 用来承载元素的内容。
在 connectedCallback() 方法中，我们打印了一个日志来证明元素的正确连接到了网页。
总结
Custom Elements 是构建 Web 组件化应用的重要接口，它提供了一种标准的定义和操作自定义元素的方式。本文详细介绍了 Custom Elements 的核心 API，包括 CustomElementRegistry.register() 方法、HTMLElement 类和 Shadow DOM。通过学习这些 API，在实践中就能更好地掌握 Web 组件化开发的技巧了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c33ab48841e9894a87cf5