在 Web 前端开发中，我们经常会使用各种框架和库来构建页面，但很少有人关注到 HTML 标签本身的可扩展性。其实，随着 Web 技术的不断发展，HTML 标签也可以被扩展，从而构建出更加复杂、灵活的页面。
这就是 Custom Elements 的由来。Custom Elements 是 Web Components 规范中的一部分，允许开发者创建自定义 HTML 标签，并在页面中使用。它为我们提供了一个全新的 Web 界面开发方式，可以让我们更加灵活、高效地开发页面。
Custom Elements 的基本使用
要创建一个 Custom Element，我们需要使用 customElements.define 方法，它接受两个参数：
- 标签名：自定义元素的名称，必须以
-开头。 - 构造函数：用于创建 Custom Element 的构造函数。
下面是一个简单的 Custom Element 示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ------- --------
------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们创建了一个名为 my-element 的 Custom Element，它会在页面中显示一个包含文本内容的 div 元素。
首先，我们定义了一个 MyElement 类，它继承自 HTMLElement。在该类的构造函数中，我们创建了一个 Shadow DOM，并在其中添加了一个 div 元素，用于显示文本内容。
然后，我们调用了 customElements.define 方法，将 my-element 标签与 MyElement 类关联起来。这样，在页面中使用 <my-element></my-element> 标签时，就会创建一个 MyElement 实例，并显示出我们定义的内容。
Custom Elements 的高级使用
除了基本的使用方式，Custom Elements 还提供了许多高级的特性，可以让我们更加灵活地开发 Web 界面。
属性
我们可以为 Custom Element 定义属性，以接收外部的参数传入。属性的定义方式和普通 HTML 标签类似，可以通过 setAttribute 方法进行赋值。
下面是一个包含自定义属性的 Custom Element 示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
-------
------
----------- -------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ---------------------------
--------------- - ------- --------
------------------------
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
--------------
-
-------- -
----- --- - -------------------------------------
--------------- - ---------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们为 my-element 定义了一个 color 属性，用于接收外部传入的颜色参数。在 MyElement 类的构造函数中，我们获取了该属性的值，并根据值来设置 div 元素的颜色。
此外，我们还定义了一个 observedAttributes 方法，用于指定需要监听的属性，该方法返回一个由属性名组成的数组。在属性发生变化时，attributeChangedCallback 方法会被触发，我们可以在该方法中重新渲染组件，从而实现属性响应式的效果。
生命周期
Custom Element 还提供了许多生命周期方法，可以让我们在组件的不同生命周期中执行一些特定的操作。
常见的生命周期方法包括：
connectedCallback：当 Custom Element 首次被插入文档 DOM 中时，触发该方法。disconnectedCallback：当 Custom Element 被从文档 DOM 中移除时，触发该方法。adoptedCallback：当 Custom Element 被移动到新的文档时，触发该方法。attributeChangedCallback：当 Custom Element 的某个属性发生变化时，触发该方法。
下面是一个使用生命周期方法的 Custom Element 示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
--------------- - ------- --------
------------------------
-
------------------- -
-------------------------
-
---------------------- -
----------------------------
-
----------------- -
-----------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的示例中，我们定义了 connectedCallback、disconnectedCallback 和 adoptedCallback 三个生命周期方法，并在控制台中打印了相关信息。当 my-element 被插入到文档 DOM 中时，connectedCallback 方法会被触发；相反，当 my-element 被从文档 DOM 中移除时，disconnectedCallback 方法会被触发；当 my-element 被移动到新的文档时，adoptedCallback 方法会被触发。
总结
Custom Elements 是 Web Components 中的一部分，可以让我们创建自定义 HTML 标签，并在页面中使用，从而实现更加灵活、高效的 Web 界面开发方式。
在使用 Custom Elements 开发 Web 界面时，我们可以利用属性和生命周期方法等高级特性，实现更加复杂、灵活的组件功能。
虽然 Custom Elements 还不被所有主流浏览器所支持，但随着 Web 技术的不断发展，相信它会为我们带来更多惊喜和便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f68be8f6b2d6eab3f21464