在 Web 开发中，我们经常需要自定义一些标签和组件，以增强页面交互和功能。而 HTML 默认提供的标签是有限的，无法满足所有需求。所以我们需要了解 Custom Elements，这是一项新的 Web 标准，可以通过 JavaScript 扩展标签，实现自定义元素。
自定义元素的基本概念
Custom Elements 允许我们声明自定义元素，其中可以包含自定义的行为和样式。使用自定义元素，我们可以轻松地向页面添加新的标签，并在其中组合其他元素和组件。
使用 Custom Elements，我们可以自定义元素的名称、属性和方法等。而这些新的自定义元素，则可以像任何其他 HTML 元素一样进行使用和组合。
如何扩展元素
要扩展一个元素，需要创建一个新的 JavaScript 类(class)，并通过该类的构造函数 customElements.define() 声明该元素。需要注意的是，这个类必须继承 HTMLElement，这意味着该类将拥有所有节点类型的原生功能，例如添加子节点、添加事件等。
下面就是一个简单的例子，展示了如何扩展一个按钮(Button)元素：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----------------
----- ----------------
-------
------
------- -------------------- -----------
--------
----- -------- ------- ------------
--------------
--------
------------------------------ -----
----------------
--
-
-
---------------------------------- ----------
-------- --------
---
---------
-------
-------在上面的例子中，我们创建了 MyButton 类，并在构造函数中添加了 click 事件监听器，该监听器会在按钮被点击时弹出一个 Hello! 的提示框。接着，我们通过自定义元素的名称 my-button，将这个自定义元素注册到 customElements 中，参数 extends: 'button' 是用来将这个元素继承自原生 button 元素。
自定义元素的生命周期
自定义元素也有自己的生命周期，它由以下四个事件组成：
- connectedCallback() 当元素被添加到文档流中时(例如，通过appendChild()方法添加元素时)触发。
- disconnectedCallback() 当元素从文档流中删除时(例如，通过removeChild()方法删除元素时)触发。
- adoptedCallback() 当元素被移动到一个新的文档时(例如，通过 adoptNode() 方法)触发。
- attributeCallback() 当自定义元素的一个或多个属性的值发生变化时触发。
下面的例子展示了如何使用生命周期事件来控制元素的属性和行为：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----------------
----- ----------------
-------
------
----------- ------------------------
--------
----- --------- ------- ------------
--------------
--------
---------- - -------------------------- -- --
-
--------------------
-------------- - -
------- ---------------------------
----- ------------------------------------
------- ---------------------------
--
--------------------------------------------------------- -----
-------------
------------------------------------------ - -----------
---
--------------------------------------------------------- -----
-------------
------------------------------------------ - -----------
---
-
------------------------------ ------- --------
------- --- ---------
---------- - -------
------------------------------------------ - -----------
-
-
------ --- ---------------------
------ ----------
-
-
----------------------------------- -----------
---------
-------
-------在上面的例子中，我们创建了 MyCounter 类，并在构造函数中初始化计数器 count 变量。在 connectedCallback() 中，我们根据计数器的值渲染按钮和计数器，并为两个按钮添加 click 事件监听器，用于更新计数器的值。在 attributeChangedCallback()中，我们检测计数器属性 start 的变化，并在变化时更新计数器的值。
我们通过在类上定义 observedAttributes() 方法来跟踪我们要监视变化的属性。在这个例子中，我们只监视 start 属性。尝试更改 start 属性的值，然后查看输出结果。可以看到，计数器的值随着 start 属性的值的变化而改变。这证明了 attributeChangedCallback() 方法是正确触发的。
总结
Custom Elements 可以为 Web 开发者提供更好的 HTML 自定义元素支持。使用 Custom Elements，我们可以创建自定义元素、监听元素的生命周期事件、属性变化和操作元素。这项新的 Web 标准为开发人员提供了更加清晰、高效和可维护的方式来创建和使用符合自己需求的组建。
通过上面的例子，我们可以快速入门 Custom Elements ，如何使用JavaScript语言扩展自定义元素。这为我们开发更加丰富的Web项目提供更多的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e72f5df6b2d6eab329a49a