前言
现代 Web 应用已经逐渐从传统的页面驱动转变成了组件驱动，其中 Custom Elements（自定义元素）作为 Web Components 的重要核心之一，提供了一种自定义 HTML 元素的方式，使得我们可以在不污染全局命名空间的前提下，自由地创建属于自己的 HTML 元素。
本文将介绍 Custom Elements 的基础概念、创建方式、生命周期以及使用方式，并结合实例进行详细的讲解。希望通过本文的学习，能帮助各位快速入门 Custom Elements。
什么是 Custom Elements
Custom Elements 允许我们定义自己的 HTML 元素，并可以在这些元素的生命周期中添加自定义的行为和功能。它的本质就是一种封装并暴露出的类，这个类会继承自 HTMLElement 原生 DOM 元素，从而拥有了 HTMLElement 的所有属性和方法，同时它也可以添加自己独特的属性和方法。
例如，我们可以自定义一个 <popup> 元素，以便在需要弹出提示框时更方便地使用，它的 HTML 代码可能如下所示：
<popup message="Hello, world!"></popup>
此时，我们仅需要在页面中定义这个自定义元素的实现代码，就可以使用它完成弹窗的效果，而无须关心内部具体实现。
创建 Custom Elements
对于 Custom Elements 的创建过程，我们可以通过两种方式实现：继承式和构造式。在这里，我们将通过构造式来实现自定义元素的创建。
使用 customElements.define()
customElements.define() 是创建自定义元素的关键方法，它接受两个参数：自定义元素名称和自定义元素的实现类。实现类的关键代码可以参考下面的范例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- ---------- - ------------------- - -- ---------------- - ---------------------- - -- ---------------- - ------ --- -------------------- - ------ --------- --------- - ------------------------------ --------- --------- - -- -------------- - -- ----- ---------- - -- ------------- - - ----------------------------------- -----------展开代码
上述代码实现了一个自定义元素，并将其命名为 my-element。它继承自 HTMLElement，实现了constructor() 、connectedCallback() 、disconnectedCallback()、attributeChangedCallback()、myMethod() 这几个方法（均为可选方法），分别用于在元素初始化、插入页面、移出页面、属性值变化和调用自定义方法时触发。
同时，也可以通过 static get observedAttributes() 方法来指定需要观察的属性列表，该方法返回一个数组，其中列出的属性名称在被修改时，将会触发相应的 attributeChangedCallback() 方法。
自定义元素的生命周期
自定义元素的生命周期包括以下几个阶段：
constructor()：构造函数，在自定义元素被创建时调用。connectedCallback()：元素插入文档树时触发，此时可以影响页面的渲染过程。disconnectedCallback()：元素从文档树中移除时触发，此时可以释放和清除一些资源，避免内存泄漏。attributeChangedCallback(name, oldValue, newValue)：使用observedAttributes方法观察的属性值变化时触发，其中name为属性名，oldValue为旧值，newValue为新值。
自定义方法
自定义元素可以添加自己的方法，以完成更丰富的功能，例如：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- -------- - -------------------------------------- ----- ------- - --------------------------------- ------------------- ----- ------ -- ---------------------- - ------------------- - ----- -------- - -------------------------------------------- ---------------------------------- -- -- - ----------- - ----- --- - ---------- - ------------------------ - - ----------------------------------- -----------展开代码
上述代码展现了一个使用 Shadow DOM 创建特殊元素的例子。同时，它还添加了一个叫做 myMethod() 的自定义方法，用于后续的调用和扩展。
自定义元素的使用
创建好自定义元素后，我们就可以在页面中通过标签的方式来使用它了。使用方式也非常简单，只需要在 HTML 页面中添加对应的标签即可：
<my-element></my-element>除了这种直接使用标签的方式外，我们还可以通过 JavaScript 代码的形式，去动态地创建这些自定义元素，例如：
const myElement = new MyElement(); document.body.appendChild(myElement);
类似的还有，我们还可以添加自定义事件、属性的方式去扩展元素的功能。
示例代码
最后，我们来看下来一个完整的例子，它实现了一个 <popup> 元素，用于在页面中弹出提示框，并提供了开关、标题和内容等自定义属性：
-- -------------------- ---- ------- ----- ------------ ------- ----------- - ------------- - -------- ----- -------- - ----------------------------------------- ----- ------- - --------------------------------- ------------------- ----- ------ -- ---------------------- ------------- - -------------------------------------------- ------------ - ------------------------------------ -------------- - ------------------------------------------ - ------------------- - --------------------------------------- -- -- - ------------------------------- --- - ------ --- -------------------- - ------ --------- ---------- ---------- - ------------------------------ --------- --------- - ------ ------ - ---- -------- ---------------------- - --------- ------ ---- ---------- ------------------------ - --------- ------ ---- --------- -- --------- --- ----- - ------------------------------------------------------------------- - ---- - ---------------------------------------------------------------- - ------ - - --- --------------- - -------------------------- ---------- - --- ----------------- - ---------------------------- ---------- - --- ---------------- - -- ------------ - --------------------------- ---- - ---- - ------------------------------- - - - -------------------------------------- -------------- ----- ----- - --- --------------- ----------- - -------- ------------- - -------- ------------ - ----- ---------------------------------展开代码
最后，我们通过 const popup = new PopupElement() 创建了一个 <popup-element> 元素的实例，通过设置它的属性，实现了一系列在页面中弹出提示框的效果。
结语
本文对 Custom Elements 的基础概念、创建方式、生命周期和使用方式进行了讲解，并且提供了一个完整的示例代码，希望可以帮助各位加深对于 Custom Elements 的理解，并且用它来提高我们的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6795d5c2504e4ea9bdc1262a
