在前端开发中，我们会用到各种内置的 HTML 元素，如 <div>、<ul>、<a> 等等。除了这些内置元素，我们还可以创建自己的 HTML 元素，这就是所谓的自定义元素（Custom Elements）。
什么是自定义元素？
自定义元素是一种可以通过定义新的 HTML 标签，来扩展页面功能的方式。自定义元素的语法和使用方式与内置元素相同，但是它能通过 JavaScript 控制其行为和样式。
除此之外，自定义元素还可以实现自己的生命周期方法，响应外部属性的变化等等自定义功能。
如何创建自定义元素？
创建自定义元素需要以下三个步骤：
- 定义一个继承自 HTMLElement 的 JavaScript 类。
- 使用
customElements.define方法注册这个类并指定它的元素名称。 - 在 HTML 文件中使用新的标签名称。
下面是一个简单的自定义元素的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
---- ----- ---
--------
----- -------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
--------------------
---
-
-
---------------------------------- ----------
---------
---- ----- ---
--------------------------
-------
-------在这个例子中，我们定义了一个继承自 HTMLElement 的 JavaScript 类 MyButton。在这个类的 constructor 方法中，我们添加了一个点击事件监听器，在用户点击该元素时触发弹窗。
通过 customElements.define 方法，我们将这个类注册为新的元素类型 my-button。这意味着 HTML 文件中可以使用新的标签名 <my-button>。
最后，我们在 HTML 文件中使用了新的标签名称 <my-button>，并添加了文本内容“点击我”。
在运行这个 HTML 文件时，我们可以看到页面中出现了一个类似 <button> 元素的按钮，点击按钮后弹出一个提示框。
自定义元素的进阶用法
以上是一个简单的自定义元素示例，但是在实际开发中，我们常常需要更高级的自定义元素功能。
自定义元素的生命周期方法
自定义元素有专门的生命周期方法，这些方法会在元素创建、插入、移除和属性变化等不同的阶段被调用。这些生命周期方法可以用来执行一些特定功能或者初始化元素状态。
下面是一个自定义元素的示例，它实现了 connectedCallback 和 disconnectedCallback 生命周期方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------
-------
------
---- ----- ---
--------
----- --------- ------- ----------- -
------------- -
--------
----------- - --
-
-- ----------
------------------- -
----------- - ---------------------------------
----------------------- - -------
------------------------------------- ---------------------------
------------------------------
---------- - -------------------------------
---------------------- - --------------------
-----------------------------
-
-- ------------
---------------------- -
------------------------------
-----------------------------
----------- - -----
---------- - -----
-
----------- -
--------------
---------------------- - --------------------
-
-
----------------------------------- -----------
---------
---- ----- ---
-------------------------
-------
-------在这个例子中，我们定义了一个叫做 MyCounter 的自定义元素，并实现了 constructor、connectedCallback 和 disconnectedCallback 生命周期方法。
在 connectedCallback 方法中，我们创建了一个计数按钮和一个计数标签，并添加到自定义元素的子节点中。在 disconnectedCallback 方法中，我们移除这些子节点并将其置空。
在点击计数按钮时，我们会更新计数值，并相应地修改计数标签的文本。
自定义元素的属性
与内置元素一样，自定义元素也可以有属性。这些属性可以在 JS 中或者 HTML 中设置，并且可以通过 attributeChangedCallback 生命周期方法来响应属性变化。
下面是一个自定义元素的示例，它实现了一个 name 属性，并将属性值显示在元素中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
---- ----- ---
--------
----- ---------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - ---------- ----- ------------------------
-
------------------- -
------------------
-
------------------------------ ------- ------- -
------------------
-
--- ------ -
------ --------------------------
-
--- --------- -
------------------------- -----
-
------------ -
-------------------------------------------------- - ----------
-
-
------------------------------------ ------------
---------
---- ----- ---
------------ ---------------------------
-------
-------在这个例子中，我们定义了一个名为 MyGreeting 的自定义元素，并实现了一个名为 name 的属性。
在 constructor 方法中，我们使用 attachShadow 方法创建了一个新的 shadow DOM，并将 <p> 元素和一个 <span> 元素放到其中。在 <span> 元素中显示了 name 属性的值。
在 connectedCallback 方法中，我们调用 updateName 方法来刷新元素的显示。在 attributeChangedCallback 方法中，我们也调用了 updateName 方法以响应属性变化。
在 get name 和 set name 方法中，我们定义了 name 属性的读取和写入方法，以简化对该属性的操作。
总结
自定义元素是一种非常有用的前端技术，用于扩展 HTML 元素并提供自定义的行为和样式。
在本文中，我们介绍了自定义元素的基本语法，并展示了一些高级用法，如生命周期方法和属性。希望读者能够通过学习本文，掌握自定义元素的基本知识，实现更加丰富的页面功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2d5a4f6b2d6eab3e1f3a0