什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并且可以在页面中像原生 HTML 元素一样使用。Custom Elements 可以通过 JavaScript 构造函数来定义，它们可以包含自己的行为和样式，并且可以与其他元素交互。Custom Elements 是 Web Components 中最基本的部分，也是实现可重用组件的基础。
如何定义 Custom Elements
定义 Custom Elements 需要使用 customElements.define 方法，这个方法接收两个参数：元素名称和一个构造函数。下面是一个简单的例子：
class MyElement extends HTMLElement {
constructor() {
super();
// 在这里可以添加自定义的行为和样式
}
}
customElements.define('my-element', MyElement);在上面的例子中，我们定义了一个名为 my-element 的自定义元素，并且用一个继承自 HTMLElement 的构造函数来实现它。这个构造函数可以添加自定义的行为和样式，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - -------------------
-------------------------- - ----------
-
-
----------------------------------- -----------在这个例子中，我们在构造函数中设置了元素的 HTML 内容和背景色。
如何使用 Custom Elements
定义好 Custom Elements 后，我们可以在 HTML 中像使用普通元素一样使用它们。例如：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ---------------------- ------- ------ ------------------------- ------- ----------------------------- ------- -------
在上面的例子中，我们在 HTML 中使用了 my-element 元素，并且在页面底部引入了定义 my-element 的 JavaScript 文件。
Custom Elements 的生命周期
Custom Elements 有四个生命周期钩子函数，分别是：
constructor()：创建元素时调用的函数，可以在这里初始化元素的状态。connectedCallback()：元素被插入到文档中时调用的函数，可以在这里添加事件监听器或启动定时器等操作。disconnectedCallback()：元素被从文档中移除时调用的函数，可以在这里清除事件监听器或停止定时器等操作。attributeChangedCallback()：元素的属性被添加、删除或修改时调用的函数，可以在这里更新元素的状态。
下面是一个包含所有生命周期函数的例子：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------------------
-
------------------- -
---------------------------------
-
---------------------- -
------------------------------------
-
------------------------------ --------- --------- -
-------------------------------------- ------------------- -- --------------
-
-
----------------------------------- -----------在上面的例子中，我们在每个生命周期函数中打印出了一条消息，用来展示生命周期函数的调用顺序。我们可以在调试工具中查看这些消息，以了解 Custom Elements 的生命周期。
总结
Custom Elements 是 Web Components 中最基本的部分，它允许开发者创建自定义的 HTML 元素，并且可以在页面中像原生 HTML 元素一样使用。定义 Custom Elements 需要使用 customElements.define 方法，使用时需要传入元素名称和一个构造函数。Custom Elements 有四个生命周期钩子函数，分别是 constructor、connectedCallback、disconnectedCallback 和 attributeChangedCallback，它们分别在元素创建、插入到文档中、移除出文档以及属性变化时被调用。Custom Elements 可以帮助我们实现可重用的组件，提高开发效率和代码可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65553c2cd2f5e1655df49720