在现代 Web 开发中，组件化已经成为一种必不可少的技术。在过去，组件化实现往往依赖于框架或库，例如 React、Vue 等等。但是，随着 Web Components 的兴起，我们现在可以在浏览器原生支持的情况下实现组件化开发。其中，Custom Elements 是 Web Components 的核心 API 之一。
什么是 Custom Elements
Custom Elements 允许开发者定义自己的 HTML 元素，从而实现组件化开发。Custom Elements 的定义需要继承于 HTMLElement 类，以实现自定义元素的行为。
Custom Elements 正在逐渐被浏览器原生支持。目前，Chrome、Firefox、Safari、Edge 等主流浏览器都已经支持 Custom Elements。在其他不支持 Custom Elements 的浏览器中，我们可以使用 polyfills 来实现这个特性。
如何定义 Custom Elements
要定义 Custom Elements，我们需要使用 customElements.define() 方法。这个方法接受两个参数，第一个参数是元素名称（需要遵循 HTML 元素名称的规则），第二个参数是一个构造函数，将使用这个构造函数来实现自定义元素的行为。例如：
-- -------------------- ---- -------
---- ------- ---------- ------ ---
-------------------------
--------
-- -- ----------------------- ---- ---------- -----
----------------------------------- ----- ------- ----------- -
------------- -
--------
-- --------- ------ -------
-------------- - ------ --------
-
---
---------在这个例子中，我们定义了一个名为 "my-element" 的自定义元素，并将其内容渲染为 "Hello World!"。在页面中使用 <my-element> 标签时，会渲染出 "Hello World!"。
生命周期
除了定义元素的外观和行为之外，Custom Elements 还定义了一些生命周期方法，允许我们在元素的不同阶段执行自定义代码。这些方法包括：
constructor(): 构造函数，在元素被创建时调用。connectedCallback(): 元素被插入到文档中时调用。disconnectedCallback(): 元素被从文档中移除时调用。attributeChangedCallback(attrName, oldVal, newVal): 元素属性值发生变化时调用。
-- -------------------- ---- -------
-------------------------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
----------------------------
-
------------------- -
--------------------------
-
---------------------- -
-----------------------------
-
---------------------------------- ------- ------- -
---------------------- ----------- ------- ---- --------- -- ------------
-
---
---------在这个例子中，我们定义了一个名为 "my-element" 的自定义元素，并分别在 constructor()、connectedCallback()、disconnectedCallback()、attributeChangedCallback() 中打印了不同的输出。当元素被创建时，会输出 "constructed!"；当元素被插入到文档中时，会输出 "connected!"；当元素被移除时，会输出 "disconnected!"；当元素的属性值发生变化时，会输出对应的信息。
继承外部元素
除了定义独立的自定义元素之外，我们还可以定义继承外部元素的自定义元素。这意味着我们可以扩展现有的 HTML 元素，同时保持其现有的行为。例如，我们可以定义一个继承于 <button> 元素的自定义元素：
-- -------------------- ---- -------
---- ------- --------- ---------- ------ -- ---
---------------- ---------------
--------
-- ----- ------ --- --------- -----
----- -------- ------- ----------------- -
------------- -
--------
------------------------------ -- -- -
------------------
---
-
-
---------------------------------- --------- - -------- -------- ---
---------在这个例子中，我们定义了一个名为 "my-button" 的自定义元素，继承自 <button> 元素。在这个元素中添加了点击事件，点击时弹出提示框。在页面中使用 <my-button> 标签时，等同于使用原生的 <button> 标签。
总结
Custom Elements 是 Web Components 的核心 API 之一，允许我们定义自己的 HTML 元素，从而实现组件化开发。在本文中，我们介绍了 Custom Elements 的定义、生命周期以及继承外部元素的用法。 Custom Elements 是一个非常有用的 API，它可以大大简化我们的开发流程，提高我们的开发效率。
参考代码
定义一个基本的自定义元素：
-- -------------------- ---- -------
-------------------------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
-- --------- ------ -------
-------------- - ------ --------
-
---
---------定义一个具有生命周期的自定义元素：
-- -------------------- ---- -------
-------------------------
--------
----------------------------------- ----- ------- ----------- -
------------- -
--------
----------------------------
-
------------------- -
--------------------------
-
---------------------- -
-----------------------------
-
---------------------------------- ------- ------- -
---------------------- ----------- ------- ---- --------- -- ------------
-
---
---------定义一个继承自 button 元素的自定义元素：
-- -------------------- ---- -------
---------------- ---------------
--------
----- -------- ------- ----------------- -
------------- -
--------
------------------------------ -- -- -
------------------
---
-
-
---------------------------------- --------- - -------- -------- ---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648693a648841e9894521a45