Custom Elements 是 Web Components 模块的一个重要功能，它可以让我们定义并使用自定义的 HTML 标签，这让我们面向组件化的方式开发 Web 应用变得更加轻松和高效。然而，在实际应用中，不同的 Custom Elements 往往有很多共性，例如生命周期和属性回调机制等，因此，我们往往需要一个通用的 Custom Elements 基类，让我们可以更加便捷地实现自定义元素的开发。
本文将介绍如何实现一个通用的 Custom Elements 基类，它将提供一个标准的 Custom Elements 生命周期和属性回调机制，并且支持通过类成员变量来定义元素的默认样式和 Shadow DOM 结构。
Custom Elements 生命周期
一个 Custom Elements 的生命周期包括了以下几个阶段：
- 元素定义阶段：在这个阶段，我们通过定义
CustomElementRegistry.define()方法来定义自定义元素，这一步通常在应用的main.js或者第一个使用到该元素的脚本中完成。 - 自定义元素构建阶段：当一个自定义元素被创建并且被插入到文档中时，该元素的
constructor方法被调用，并且connectedCallback()方法也被调用，表示该元素已经被构建，并且被添加到了文档树中。 - 自定义元素属性变更阶段：当一个自定义元素的属性变更时，对应的
attributeChangedCallback()方法会被调用。 - 自定义元素移除阶段：当一个自定义元素从文档树中移除时，
disconnectedCallback()方法会被调用，表示该元素已经被移除。
综合考虑这些阶段，我们可以定义一个通用的 Custom Elements 基类如下：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
--------------
-
---------------------- --
-- --------
------------------------------ --------- --------- --
-- ---------- ------ --- --
--- ------- --
--- ---------- --
-- ------
-------- -
-- -- ------ --- ---
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
----------------------------
----------------
--
-
-- ------
------ --- -------------------- -
------ ---
-
-在这个基类中，我们定义了一个 CustomElement 类，并继承了 HTMLElement，这样我们就可以拥有自定义元素的基本特性。同时，我们还定义了 connectedCallback()、disconnectedCallback() 和 attributeChangedCallback() 方法，分别对应了元素的生命周期。最后，我们还定义了 style 和 template 属性以及 render() 方法，用于定义元素的样式和 Shadow DOM 结构。
属性回调机制
在实际开发中，我们经常需要让元素在属性变更时改变其行为或者样式。因此，我们需要提供一个属性回调机制，让代码可以侦听元素属性的变化，然后执行相应的操作。
在 CustomElement 基类中，我们可以使用 defineProperty() 函数来实现属性回调机制，示例代码如下：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ----- - ------------------------------------
--- ------ ---- -- ------ -
--------------------------- ----- -
---- -- -- -
------ ------------------------
--
---- ------- -- -
----------------------- -------
--
---
-
-
------------------------------ --------- --------- -
-- --------- --- -------- -- ----------- -
---------- - ---------
-
-
-- ---在这个代码中，我们在 constructor() 方法中遍历了 observedAttributes 属性，然后为每个属性都定义了一个 getter 和 setter 函数。getter 函数直接返回对应属性的 getAttribute() 方法，setter 函数则调用了对应属性的 setAttribute() 方法。通过这种方式，我们可以让代码侦听元素属性的变化，然后执行相应的操作。
定义自定义元素
通过 CustomElement 基类，我们就可以方便地定义自定义元素了。举个例子，我们可以定义一个名为 my-button 的自定义元素，用于显示一个按钮，并且在点击按钮时会弹出一个弹框，示例代码如下：
-- -------------------- ---- -------
----- -------- ------- ------------- -
------------- -
--------
------------------------------ -- -- -
------------- ---------
---
-
-- ------- ------ --- --
--- ------- -
------ -
------ -
----------------- --------
------ -----
------- -----
-------------- ----
------- --------
---------- -----
-------- --- -----
-
--
-
--- ---------- -
------ -------------- --------------
-
------ --- -------------------- -
------ -------------
-
-- -------- ------
--- ---------- -
------ ------------------------------
-
--- ------------- -
-- ----- -
----------------------------- ----
- ---- -
---------------------------------
-
-
-
-- -- --------- --
---------------------------------- ----------在这个代码中，我们定义了一个 MyButton 类，并继承了 CustomElement。通过 style 和 template 属性，我们定义了按钮的样式和 Shadow DOM 结构。同时，我们还指定了 observedAttributes 属性，该属性表示我们需要侦听的元素属性，这里我们仅仅监听了 disabled 属性。最后，我们定义了 disabled 属性的 getter 和 setter 方法，用于在 attributeChangedCallback() 中实现回调机制。
总结
通过本文介绍的方式，我们可以很容易地实现一个通用的 Custom Elements 基类，该基类可以提供标准的元素生命周期和属性回调机制，并且支持通过类成员变量来定义元素的默认样式和 Shadow DOM 结构。通过这种方式，我们可以大量减少代码的重复量，让自定义元素的开发变得更加轻松和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654dd2a97d4982a6eb733ac4