在现代 Web 开发中，Custom Elements 成为了越来越流行的开发模式。Custom Elements 允许开发者创建自定义的 HTML 标签，从而实现更加模块化和可重用的代码。
本篇文章将带领读者学习如何编写可重用的 Custom Elements，通过详细的讲解和示例代码，让读者能够快速上手 Custom Elements 开发。
Custom Elements 概述
Custom Elements 是 Web Components 规范的一部分，它的作用是让开发者可以创建自己的 HTML 标签，从而扩展了现有的 HTML 标签库。多个 Custom Elements 组合在一起可以构成一个复杂的 Web 应用。
与传统的 HTML 标签不同，Custom Elements 具有更加灵活的属性和行为。通过定义 Custom Elements，开发者可以将常用的功能封装成独立的模块，从而实现更加模块化和可重用的代码。
1. 定义 Custom Elements
定义一个 Custom Elements 首先需要继承自 HTMLElement，然后通过使用 window.customElements.define 方法将自定义标签与定义类关联起来。下面是一个简单的示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - -
--- ----------------------------------
-- ----------------------- ----------
--
-
-
------------------------------------------------- -----------------在上面的示例中，我们定义了一个名为 MyCustomElement 的 Custom Elements，它继承自 HTMLElement 类。在 connectedCallback 方法中，我们定义了 Custom Elements 的 HTML 内容，当 MyCustomElement 被插入到文档中时，connectedCallback 方法就会被调用，此时会将定义的 HTML 内容插入到 MyCustomElement 中。
2. 自定义属性
Custom Elements 允许我们自定义属性，通过定义属性，我们可以向 Custom Elements 传递数据，实现更加灵活的行为。
下面是一个示例，我们在 MyCustomElement 中定义了一个 name 属性，并将其默认值设置为 World，在 connectedCallback 方法中，我们使用 name 属性更新了 MyCustomElement 的 HTML 内容。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------- - --------
-
------ --- -------------------- -
------ ---------
-
------------------- -
--------------
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
---------- - ---------
--------------
-
-
-------- -
-------------- - -
--- ----------------------------------
-- ----------------------- ------------------
--
-
--- ------ -
------ -----------
-
--- ----------- -
------------------------- -------
-
-
------------------------------------------------- -----------------在上面的示例中，我们通过 static get observedAttributes 方法指定了需要观察的属性，也就是当 name 属性发生变化时，attributeChangedCallback 方法就会被调用。在 attributeChangedCallback 中，我们更新了 _name 属性，并调用了 render 方法，更新了 MyCustomElement 的 HTML 内容。
3. 事件和方法
Custom Elements 允许我们自定义事件和方法，以实现更加灵活的行为。
下面是一个示例，我们在 MyCustomElement 中定义了一个 click 事件，当 MyCustomElement 被点击时，触发 click 事件，并向上冒泡到父级元素。
同时，我们还在 MyCustomElement 中定义了一个 getName 方法，当调用 getName 方法时，返回 name 属性的值。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------- - --------
---------------- - ----------------------------
-
------ --- -------------------- -
------ ---------
-
------------------- -
--------------
------------------------------ ------------------
-
---------------------- -
--------------------------------- ------------------
-
------------------------------ --------- --------- -
-- ----- --- ------ -- -------- --- --------- -
---------- - ---------
--------------
-
-
-------- -
-------------- - -
--- ----------------------------------
-- ----------------------- ------------------
--
-
------------------ -
---------------------- -------------- - -------- ---- ----
-
--------- -
------ -----------
-
--- ------ -
------ -----------
-
--- ----------- -
------------------------- -------
-
-
------------------------------------------------- -----------------在上面的示例中，我们通过 addEventListener 和 removeEventListener 方法添加和移除了 click 事件的监听器。同时，我们定义了 getName 方法，并通过 get 方法让其成为 MyCustomElement 的属性，可以通过直接访问 MyCustomElement.getName() 或 MyCustomElement.name 的方式来调用该方法。
指导意义
Custom Elements 是 Web 开发中一个很有潜力的技术，通过编写可重用的 Custom Elements，我们可以更加灵活、高效地开发 Web 应用。
在编写 Custom Elements 时，我们需要注意以下几点：
定义 Custom Elements 时需要继承自 HTMLElement 类
使用 window.customElements.define 方法将自定义标签与定义类关联起来
自定义属性需要使用 get 和 set 方法来定义，并通过 observedAttributes 方法来指定需要观察的属性
自定义事件和方法可以使用 addEventListener 和 removeEventListener 方法来添加和移除监听器，通过 dispatchEvent 方法触发事件，通过 get 和 set 方法将方法定义为属性
通过以上的讲解和示例，读者已经可以了解如何编写可重用的 Custom Elements，并可以实践和深入学习该技术。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d02ab8e46428fe9ecdcb2d