什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，包括它们的行为和样式。这些自定义元素可以像原生 HTML 元素一样使用，并且可以在不同的页面和应用程序之间重复使用。
Custom Elements API 包括两个部分：
- 自定义元素定义：使用
window.customElements.define()方法定义一个自定义元素。 - 生命周期回调：自定义元素有一些生命周期回调，可以在元素被创建、插入文档、属性被更改或被移除时执行一些操作。
如何创建 Custom Elements
下面是一个简单的 Custom Elements 示例，它创建了一个自定义元素 <my-element>，并在元素被创建时向控制台输出一条消息：
----- --------- ------- ----------- -
------------- -
--------
---------------------- ----------
-
-
------------------------------------------ -----------上面的代码使用 class 关键字定义了一个 MyElement 类，它继承了 HTMLElement 类。在 constructor 方法中，我们调用了 super() 方法，这样我们就可以访问 HTMLElement 的属性和方法。
接下来，我们使用 window.customElements.define() 方法定义了一个名为 my-element 的自定义元素，并将 MyElement 类作为第二个参数传递。
如何使用 Custom Elements
使用自定义元素非常简单，只需要在 HTML 中使用自定义元素的标签即可。下面是一个使用 <my-element> 标签的示例：
--------- -----
------
------
----- ----------------
------------- -------- ------------
-------
------
-------------------------
------- -----------------------------
-------
-------在上面的示例中，我们在 <body> 中使用了 <my-element> 标签，并在 <script> 中引入了 my-element.js 文件，这个文件包含了我们定义的 MyElement 类。
当我们打开这个 HTML 文件时，我们会在浏览器的控制台中看到一条消息，这是因为我们在 MyElement 类的构造函数中输出了一条消息。
如何给 Custom Elements 添加属性和方法
我们可以给自定义元素添加属性和方法，让它们具有更多的行为和功能。下面是一个示例，它给 <my-element> 元素添加了一个 message 属性和一个 logMessage() 方法：
----- --------- ------- ----------- -
------------- -
--------
---------------------- ----------
-
--- --------- -
------ -----------------------------
-
--- -------------- -
---------------------------- -------
-
------------ -
--------------------------
-
-
------------------------------------------ -----------在上面的代码中，我们添加了一个 get 和一个 set 方法来访问 message 属性。在 logMessage() 方法中，我们输出了 message 属性的值。
现在，我们可以在 HTML 中使用 message 属性和 logMessage() 方法了：
--------- -----
------
------
----- ----------------
------------- -------- ------------
-------
------
----------- --------------- ---------------------
------- -----------------------------
--------
----- ---- - -------------------------------------
------------------ -- -- ------- -------
---------
-------
-------在上面的示例中，我们在 <my-element> 标签中添加了一个 message 属性，并在 JavaScript 中调用了 logMessage() 方法。
使用 Custom Elements 创建可嵌入的 Web 组件
使用 Custom Elements，我们可以轻松地创建可嵌入的 Web 组件，这些组件可以在不同的页面和应用程序之间重复使用。下面是一个使用 Custom Elements 创建可嵌入的按钮组件的示例：
----- -------- ------- ----------- -
------ --- -------------------- -
------ -------------
-
------------- -
--------
------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
------ -
----------------- --------
------ ------
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
-
---------------- -
-------- ----
------- ------------
-
--------
------------------------------
--
--------------------------------------------------------------
-
------------------------------ --------- --------- -
----- ------ - ----------------------------------------
-- ----- --- ---------- -- -------- --- ----- -
------------------------------- ----
- ---- -
-----------------------------------
-
-
--- ---------- -
------ ------------------------------
-
--- --------------- -
-- ------- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
----------------------------------------- ----------在上面的代码中，我们创建了一个名为 MyButton 的自定义元素，并添加了一个 disabled 属性。在 constructor 方法中，我们创建了一个 Shadow DOM，并通过插入一个模板元素来定义按钮的样式和 HTML 结构。
在 attributeChangedCallback() 方法中，我们检测 disabled 属性的变化，并更新按钮的 disabled 属性。在 get 和 set 方法中，我们访问和设置 disabled 属性。
现在，我们可以在 HTML 中使用 <my-button> 标签来创建按钮：
--------- -----
------
------
----- ----------------
------------- -------- ------------
-------
------
---------------- --------------
---------- ----------------- ------------------
------- ----------------------------
-------
-------在上面的示例中，我们创建了两个按钮，一个是可用的，一个是禁用的。我们还引入了 my-button.js 文件，这个文件包含了我们定义的 MyButton 类。
总结
Custom Elements 是 Web Components 的一部分，它允许开发者定义自己的 HTML 元素，并为这些元素添加属性和方法，创建可嵌入的 Web 组件。使用 Custom Elements，我们可以轻松地创建可重复使用的组件，使我们的开发工作更加高效和便捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6562f16dd2f5e1655dcae3f4