在 Web 开发中，我们希望能够创建独特的 HTML 标签。与 DOM 的内置元素不同，这些自定义元素可以包含自定义功能，如数据绑定、CSS 样式和行为等。Custom Elements 可以帮助我们实现这个目标。在本文中，我们将探讨如何创建可复用的 Custom Elements，详细介绍其工作原理和实现细节，并提供一个示例。
Custom Elements 概述
Custom Elements 是 Web Components 的一部分，这是一组浏览器规范，可用于创建可组合和可重用的 Web 应用程序部件。Custom Elements 是一种自定义 HTML 元素的 API，它允许开发者创建一个新的 HTML 标签，并在其内部实现功能。Custom Elements 充分利用了 Web 标准，因为它们不需要任何独特的技术或库来构建，并且与其他 Web 技术（如 Shadow DOM 和 HTML Templates）无缝集成。
Custom Elements API 在实现自定义元素时提供了一组教导，包括：
CustomElementRegistry：管理 Custom Elements，它可以注册自定义元素、获取它们的定义和检查它们是否定义。
HTMLElement：自定义元素的父类，可让其他开发者自定义其外观和行为。
自定义元素的核心思想是向 CustomElementRegistry 注册一个新标签，然后重写 HTMLElement 类的属性和方法。例如，如果我们想要创建一个名为 my-element 的 Custom Element，我们可以执行以下操作：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);重写 HTMLElement 类的属性和方法
要使 Custom Elements 具有可复用性，我们需要定义一组可配置的属性和方法。这样，其他开发者就可以定制它们的行为并在其自己的应用程序中使用它们。虽然开发者可以使用 Custom Elements 来创建几乎任何类型的元素，但是可以通过以下方式定制自定义元素：
属性
属性是 Custom Element 的状态，可以在 HTML 中设置或使用 JavaScript 直接修改它们的值。以下是我们要考虑的一些属性：
props：传递给自定义元素的属性的集合。我们可以使用 @Prop（参阅下面的示例）将本地 JavaScript 属性映射到相应的 HTML 属性。
disabled：除了设置样式之外，禁用 Custom Element 的有效方法是使用此属性。我们可以使用 @Prop 装饰器创建此属性。
selected：表示 Custom Element 是否为当前选中的元素。
-。。。
方法
方法是 Custom Element 中的行为，在特定事件发生时调用。Custom Element 应该具有以下一些方法：
render：返回 Custom Element 的模板或子元素。通常在该方法中渲染模板。
disconnectedCallback：Custom Element 被删除时调用的方法。我们可以在此处清理内存或其他基础结构。
-。。。
生命周期钩子
我们还可以通过重写以下生命周期钩子来控制 Custom Element 的生命周期：
constructor：Custom Element 的构造函数。在构造函数中，我们可以定义一些尚未定义的属性，创建内部历史记录和设置属性值等。
connectedCallback：Custom Element 连接到页面DOM时调用的方法。
disconnectedCallback：Custom Element 与页面DOM断开连接时调用的方法。
-。。。
封装 Custom Elements
要使 Custom Elements 具有可复用性，我们需要封装它们并将它们公开为可重用组件。我们可以使用以下设计模式扩展 Custom Element 的功能：
继承
继承允许我们扩展现有的 Custom Element。我们可以创建一个父类 Custom Element，其他 Custom Element 可以扩展该类来重用其功能。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
-------- -
-------------- -
------------ --- -------------------
-
-
----- --------- ------- ------------- -
------------- -
--------
--------------
-
-
----------------------------------- -----------混合
混合是一种将多个 Custom Element 合并在一起以创建一种新 Custom Element 的方式。我们可以创建一个混合类，提供常用功能（如属性、方法、生命周期）并将其用作 Custom Element 的基础。
-- -------------------- ---- -------
----- ------- - ------------ --
----- ------- ---------- -
------------------- -
------------------- ------- ----- -- --- -------
-
--
----- --------- ------- -------------------- -
---
-扩展模块
扩展模块允许自定义元素引入外部模块，这些模块用于扩展自定义元素并添加自定义行为。
-- -------------------- ---- -------
----- ------- - ------------ --
----- ------- ---------- -
------ --- ------ - ------ -------- -
--
----- --------- ------- ----------- -
------------------- -
----------------------------------- -- -------
-
-
----------------------------------- -----------示例代码
以下是一个基于 Custom Elements 的可重用组件示例。它扩展了常规 Custom Element 功能并使用 Shadow DOM 和 HTML Templates。组件具有一个名为 "my-component" 的元素，并显示一个按钮和一个文本输入框。用户可以点击按钮来显示输入框中的文本。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------- -----------------
-------
------
------------- --
------- ------------- ---------------------------------
-------
--------- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
----------- --- --- --- ------- -- -- -----
-
------ -
-------- ---- -----
----------------- -----
------ -----
------- --- ----- -----
-------------- ----
------- --------
-
------------------ -
-------- ---- -----
------- --- ----- -----
-------------- ----
-
--------
-----
------------- -----------
------ ----------- --
------
--
----- ---------- - ------------------- ----- ------ ---
---------------------------------------------------------
----------- - -----------------------------------
----------- - ---------------------------------------------
-
------------------- -
------------------------------------- -- -- -
-------------------------
---
-
------ --- -------------------- -
------ ------------------
-
--- -------------- -
------ ---------------------------------- -- ---
-
--- ------------------- -
---------------------------------- -------
-
------------------------------ --------- --------- -
-- ----- --- ---------------- -
----------------- - ---------
-
-
-
------------------------------------- -------------在这个示例中，我们定义了一个名为 "my-component" 的 Custom Element，并创建了它的模板。模板包含了一个包装了按钮和文本输入框的 div 元素，并且还附带了样式。此外，我们还将模板添加到 Shadow DOM 的根节点中。
我们将 button 和 output 属性存储在 MyComponent 类的本地变量中，以便稍后在 connectedCallback() 中使用。在 connectedCallback() 中，我们将单击事件添加到按钮，以便在单击按钮时调用 alert()。如果观察 defaultValue 属性的任何更改，则将 attributeChangedCallback() 回调。
在定义 MyComponent 类之后，我们使用 customElements.define() 方法注册 my-component 自定义元素，并指定 MyComponent 类作为实现。
总结
Custom Elements 是 Web Component 的基础部分，它利用 Web 标准来帮助我们创造可组合和可重用的应用程序部件。在本文中，我们探讨了如何实现具有可复用性的 Custom Elements，并介绍了如何重写 HTMLElement 类的属性和方法，扩展它们的功能，并封装它们作为可重用组件。虽然本文主要集中讨论了 JavaScript API，但对于 Vue、React 和 Angular 等现代 Web 开发框架来说也具有重要的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64917f7248841e9894f86b17