前言
HTML 作为 Web 开发中最基础的一门技术，已经发展了几十年。虽然 HTML 本身已经非常强大，但是在实际开发中，我们总会遇到一些需要自定义的标签或组件的情况。这时，Custom Elements 就成为了一种非常重要的解决方案。
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 标签，以便在页面中实现更复杂的组件。本文将详细介绍 Custom Elements 的使用方法及其相关知识。
Custom Elements 的基本概念
Custom Elements 允许开发者创建自定义 HTML 标签，这些标签可以像原生标签一样使用，并且可以拥有自己的属性、方法和事件。Custom Elements 的本质是 JavaScript 类，它们可以继承自 HTMLElement 或其它 HTML 元素，以便在页面中实现更复杂的组件。
在 Custom Elements 中，我们可以通过以下几个步骤来创建自定义元素：
- 定义一个继承自 HTMLElement 的 JavaScript 类；
- 使用
customElements.define()方法将该类与一个自定义标签名称关联； - 在 HTML 中使用该自定义标签。
下面我们来看一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ----------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
-
----------------------------------- -----------
---------
-------
-------这个示例中，我们定义了一个名为 MyElement 的自定义元素，并将其与 my-element 标签名称关联。在 HTML 中，我们可以像使用原生标签一样使用 my-element 标签，它将会显示 Hello, World!。
Custom Elements 的生命周期
Custom Elements 也具有自己的生命周期，包括以下几个方法：
constructor()：构造函数，在元素被实例化时调用。connectedCallback()：元素被插入到页面中时调用。disconnectedCallback()：元素被从页面中移除时调用。attributeChangedCallback()：元素的属性值发生变化时调用。
下面我们来看一个示例，演示这些方法的调用顺序：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- --------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
---------------------------
-
------------------- -
---------------------------------
-
---------------------- -
------------------------------------
-
------------------------------ --------- --------- -
-------------------------------------- ------- ----------- --------------
-
------ --- -------------------- -
------ -----------------
-
-
----------------------------------- -----------
----- -- - -------------------------------------
------------------------------- -------
-----------------------------------
------------------------------
---------
-------
-------在这个示例中，我们定义了一个名为 MyElement 的自定义元素，并实现了其生命周期方法。在 JS 中，我们先创建了一个 MyElement 元素，并设置了 my-attribute 属性的值。然后我们将它从页面中移除。在控制台中，我们可以看到输出的顺序为：
constructor attributeChangedCallback: my-attribute null 123 disconnectedCallback
Custom Elements 的属性和方法
自定义元素可以拥有自己的属性和方法，这些属性和方法可以像原生属性和方法一样使用。在 Custom Elements 中，我们可以通过以下几个步骤来定义自己的属性和方法：
- 在类的构造函数中使用
this.关键字定义属性和方法； - 在类的原型对象中定义方法。
下面我们来看一个示例：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ---------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------ - ------- --------
-
---------- -
--------------------------
-
-
----------------------------------- -----------
----- -- - -------------------------------------
--------------
---------
-------
-------在这个示例中，我们定义了一个名为 MyElement 的自定义元素，并在其构造函数中定义了一个属性 message 和一个方法 sayHello()。在 JS 中，我们创建了一个 MyElement 元素，并调用了它的 sayHello() 方法。在控制台中，我们可以看到输出了 Hello, World!。
Custom Elements 的样式
自定义元素也可以拥有自己的样式，这些样式可以通过 CSS 的 ::part() 伪类和 ::theme() 伪类来定义。其中，::part() 伪类可以用于定义元素内部的部分样式，::theme() 伪类可以用于定义元素的主题样式。
下面我们来看一个示例：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
-------
------------------------- -
------ ----
-
----------------------- -
----------------- ----------------
-
--------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ----- --------------------- --------------
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们定义了一个名为 MyElement 的自定义元素，并在其内部使用了一个包含 message 部分的 div 元素。在 CSS 中，我们使用了 ::part() 伪类来定义 message 部分的样式，使用了 ::theme() 伪类来定义 logo 主题的样式。在 HTML 中，我们创建了一个 MyElement 元素。
总结
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 标签，以便在页面中实现更复杂的组件。在 Custom Elements 中，我们可以定义自己的属性和方法，并且可以拥有自己的样式。Custom Elements 的使用方法非常简单，但是在实际开发中，我们需要深入了解其相关知识，以便更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65546bd7d2f5e1655de252f6