自定义元素是 Web Components 中非常重要的一个组成部分，可以让我们创建出全新的 HTML 标签，从而提升 Web 开发的模块化程度。Custom Elements 并不是一个全新的技术，而是对 HTML + JavaScript 的组合利用，通过新的 API 让自己的代码更加复用、易于维护。本文将深入探讨 Custom Elements 的内部工作原理，帮助读者更好地理解自定义元素的实际应用与开发。
Custom Elements 的基本组成
在了解 Custom Elements 的内部工作原理之前，我们先要明确 Custom Elements 的基本组成。
Custom Elements 主要由两大部分组成：定义和注册。
定义
我们可以使用 class 或者 function 去定义自己的 Custom Elements，定义的方式如下:
----- --------- ------- ----------- -
----------- -- -
-------
------------------- ----- ------ --
------------------------- - --------- ----------
-
-
------------------------------------------ ----------其中，我们定义了一个名为 MyElement 的类，继承自 HTMLElement。这个类的 constructor 方法中，我们实例化了一个 Shadow DOM，并将 <p>Hello World</p> 插入到了 Shadow DOM 中。
注册
使用 window.customElements.define('my-element', MyElement) 来注册一个新的自定义元素。第一个参数为元素名，必须包含短横线，表示为一个自定义元素，第二个参数为定义好的自定义元素的类或函数。
Custom Elements 的内部工作原理
Custom Elements 其实就是相当于一个通过 JavaScript 实现的“蓝图”，通过这个“蓝图”我们可以创建出一个全新的 HTML 元素，并且这个元素拥有我们定义的一些特性功能。
Custom Elements 通过内置的注册机制来实现元素的定义和操作。在我们定义好一个元素之后，我们将它注册到内置的全局注册机制中，浏览器就会告诉我们这个元素的内容发生了变化，包括在页面中的增加、删除或修改。
生命周期
Custom Elements 中的元素有两个重要的生命周期：定义时生命周期和实例化时生命周期。
在定义时生命周期中，我们可以在此拿到定义时的 DOM、属性以及 children 树，在此期间进行任何的初始化操作和设置元素初始状态的相关操作。
在实例化时生命周期中，我们可以拿到已实例化元素的 DOM、属性以及 children 树，我们可以在此进行访问和修改元素的操作。在后续的时间里，元素还会经历其他丰富的变化周期，其中重要的包括属性变化和生命周期钩子函数，这些将在后续的文章中进行更详细的介绍。
更新与通知
当我们的元素的状态被改变时，浏览器在内部通知我们，而我们可以通过 attributeChangedCallback 方法来对元素的状态变化做出响应。这个方法会拿到其对应的元素、旧属性值以及新属性值，我们可以利用这些信息来做出不同的应对措施。
通过 set 属性方法，我们可以向元素中动态添加属性或者修改其属性的值。当我们添加了一个新的属性或者修改了属性的值时，我们的自定义元素实例也会随之发生变化，这个变化会推送到浏览器内部的队列中，并且浏览器会在后续的时刻自动调动 attributeChangedCallback 方法来通知我们属性的变化发生了。
总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645110fd3423812e42fc2bc