在前端开发领域，构建 UI 组件是一项非常重要的工作。然而，在构建大规模应用程序时，往往需要编写大量的重复代码。使用 Custom Elements 可以解决这个问题，使得我们可以轻松地构建可扩展的 UI 组件。
什么是 Custom Elements？
Custom Elements 是 Web Components 规范的一部分，它允许我们定义自己的 HTML 标签和元素。这些元素和标签可以拥有自己的属性和方法，就像常规的 HTML 标签一样。使用 Custom Elements 可以轻松地构建可重复使用的组件，而无需编写大量的重复代码。
基本语法
Custom Elements 是基于类的，可以使用 ES6 的类语法来定义。以下是定义一个 Custom Element 的基本语法：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- --- -------------- ---- ----
-
------------------- -
-- ------- ---- ---- --- ------- -- ----- -- --- ---
-
---------------------- -
-- ------- ---- ---- --- ------- -- ------- ---- --- ---
-
-
----------------------------------- -----------上述代码中，我们定义了一个名为 MyElement 的 Custom Element。我们通过 extends HTMLElement 来继承 HTMLElement 类，并在 constructor 方法中添加了初始化代码。我们还添加了两个生命周期方法，分别是 connectedCallback 和 disconnectedCallback。这两个方法将在元素被添加到和删除出 DOM 树时被调用。
最后，我们使用 customElements.define 方法来注册这个 Custom Element，并指定它的名称为 my-element。
创建元素
我们可以直接在 HTML 页面中使用我们定义的 Custom Element。以下是一个示例：
<my-element></my-element>
在上面的代码中，我们创建了一个名为 my-element 的 Custom Element。当文档加载时，浏览器会自动创建并插入这个元素。
自定义元素属性
我们可以通过在 constructor 方法中使用 this.setAttribute 方法来设置元素的自定义属性。以下是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------------------------- ------- ---------
-
------------------- -
------------------------------------------
-
-
----------------------------------- -----------在上面的代码中，我们在 constructor 方法中设置了一个名为 message 的属性，并将其设置为 Hello, World!。在 connectedCallback 方法中，我们使用 this.getAttribute('message') 来获取这个属性的值，并将其输出到控制台中。
实现一个具有自定义属性和方法的元素
让我们来实现一个具有自定义属性和方法的 Custom Element，这个元素将渲染一个按钮，并在点击按钮时执行一个自定义事件。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----------- - -------------------------- -- ------ ----
-------------- - ----------------------------- --- -----
------------- - -------------------------
------------------- ----- ------ ---
------------------------- - -
-------
------ -
-------- -----
----------- --------
------ ------
------- -----
-------------- ----
------- --------
-
--------------- -
----------- -----
------- ------------
-
--------
-------------------------------
--
-
--- ------- -
------ ------------
-
--- ------------ -
----------- - ------
----- ------ - ----------------------------------------
------------------ - ------------
-
--- ---------- -
------ ---------------
-
--- --------------- -
-------------- - ------
----- ------ - ----------------------------------------
-- ---------------- -
------------------------------- ----
- ---- -
-----------------------------------
-
-
------------------- -
----------------------------------------------------------------- ---------------
-
---------------------- -
-------------------------------------------------------------------- ---------------
-
---------- -
----- ----- - --- ----------------------- -
-------- -----
--------- -----
---
--------------------------
-
-
---------------------------------- ----------在上面的代码中，我们定义了一个叫做 MyButton 的 Custom Element。在 constructor 方法中，我们使用 getAttribute 方法来读取元素的 label 和 disabled 属性，并使用 this.attachShadow 方法来创建一个 Shadow DOM。同时，我们也在 constructor 方法中定义了一个 _onClick 方法，并使用 bind 方法将它绑定到 this 上，这样在回调函数中，我们就可以通过 this 访问到 MyButton 实例的属性和方法。
在 Shadow DOM 中，我们定义了一个 button 元素，并使用样式对其进行了样式定义。我们使用 this._label 来渲染按钮的文本内容，并使用 this._disabled 来判断按钮是否应该被禁用。
在 MyButton 实例上，我们定义了两对 getter 和 setter，让外部代码可以读取和设置 label 和 disabled 属性。在 getter 方法中，我们返回了相应的属性值。在 setter 方法中，我们更新了相应的属性值，并使用 querySelector 方法来找到按钮元素，并根据属性值更新其状态。
当 MyButton 元素被添加到 DOM 树中时，connectedCallback 方法将被执行。我们在其中添加了一个点击事件监听器，它将 _onClick 方法绑定到按钮元素上。当元素被删除出 DOM 树时，disconnectedCallback 方法将被执行。我们在其中移除了这个事件监听器。
当按钮被点击时，_onClick 方法将被执行。我们定义了一个名为 my-click 的自定义事件，并使用 dispatchEvent 方法触发它。在顶层的代码中，我们可以使用 addEventListener 方法来监听这个事件的触发。
结论
Custom Elements 提供了一种简单的方式来定义自己的元素，并使它们具有自己的属性和方法。在构建前端应用程序时，它们可以帮助我们轻松地编写可重复使用的组件，从而减少了重复的代码量。本文的示例代码可以作为你自己构建 Custom Elements 的起点，你可以使用它们来创建你自己的可扩展 UI 组件，从而提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f28a6fa44b36ee5766475f