在构建复杂的 Web 应用程序时，UI 组件可以是提高开发速度和可维护性的关键。在过去，如果您想要创建可复用的 UI 组件，您必须使用框架或库如 React 或 Angular 等来创建它们。但是现在，在 Web 标准的支持下，您可以使用 Custom Elements API 来创建跨浏览器和跨框架的可复用 UI 组件。
Custom Elements 简介
Custom Elements 是 Web 标准中的一部分，它允许开发人员创建自定义 HTML 元素和组件。使用 Custom Elements，您可以创建自己的标记，如 <my-element> 或 <awesome-button>，这些标记将包含自定义行为和样式，并可重复使用在您的应用程序中。
要创建 Custom Element，您需要定义一个 JavaScript 类，并使用 customElements.define 方法注册它。注册 Custom Element 后，您可以在 HTML 中使用该元素，就像使用任何其他 HTML 元素一样。
下面是一个简单的示例，其中创建了一个 button 的 Custom Element：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
--------------------
---
-
-
---------------------------------- ----------
现在，您可以在 HTML 中使用 <my-button> 元素，就像使用 <button> 元素一样。此外，您可以使用自定义属性和方法来更改元素的属性和行为。
创建可复用 UI 组件
使用 Custom Elements 创建可复用的 UI 组件的最佳方法是将其拆分为多个 Custom Elements。每个 Custom Element 都应该是一个独立的功能组件，而且应该具有自己的样式和行为。
以下是一个可重用的模态窗口组件示例，该模态窗口由三个 Custom Elements 组成：<modal-window>、<modal-header> 和 <modal-body>。
-- -------------------- ---- -------
--------------
--------------
--- ----------------------
------- ------------------------------
---------------
------------
-----------------
-------------
---------------在这里，<modal-window> 是主要的 Custom Element，它包含一个头和一个主体。<modal-header> 元素包含一个标题和一个关闭按钮。<modal-body> 元素包含模态窗口的内容。
以下是每个 Custom Element 的 JavaScript 代码：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-- ----
------------------- ----- ------ ------------ - -
-------
-- ------ --
------ -
-------- -----
--------- ---------
-------- --
----- --
---- --
------ -----
------- -----
--------- -----
----------------- ------- -- -- -----
-
-- ----- --
-------------- -
----------------- -----
------- --- -----
-------- -----
------- --- ----- -----
------ ----
------- -----
-
--------
---- --------------
---- ----------------------
----- ---------------------
----- -------------------
------
------
--
-- ---------
---------------- - -- -- -
----- ----- - ----------------------------------------
------------------- - ------------------- --- ------ - ------- - -------
--
-
------------------- -
-- --------------
------------------------------ ------------------
-
---------------------- -
-- -------
--------------------------------- ------------------
-
-
----- ----------- ------- ----------- -
------------- -
--------
-- ----
------------------- ----- ------ ------------ - -
-------
-- ---- --
------ -
------- --
-
-- ------ --
------------- -
------- -----
----------------- ------------
------ -----
---------- ------
------------ -----
------ ------
------- --------
-
--------
----- --------------------
------- -------------------- ------------------------------------
--
-
------------------- -
-- ------------
----- ----------- - -----------------------------------------------
------------------------------------- -- -- -
-------------------------------------------
---
-
---------------------- -
-- -------
----- ----------- - -----------------------------------------------
---------------------------------------- -- -- -
-------------------------------------------
---
-
-
----- --------- ------- ----------- -
------------- -
--------
-- ----
------------------- ----- ------ ------------ - -
-------
-- -------- --
-------- -
------- --
-
--------
---- ----------------
-------------
------
--
-
-有了这些 Custom Elements，您可以很容易地在您的应用程序中使用它们，而不必关心底层实现。
总结
使用 Custom Elements API 是创建可重用 UI 组件的好方法，可以让您在没有框架或库的情况下创建自己的组件。如果您打算使用 Custom Elements 来创建您自己的组件，您需要了解 JavaScript 类、Web 标准和 Shadow DOM 的中高级概念。在上面的示例中，我们演示了如何创建一个模态窗口组件，其中使用了 Custom Elements API 和 Shadow DOM，以演示 Custom Elements 的基本概念和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6590d3a5eb4cecbf2d618aca