在前端开发的过程中，弹窗这个 UI 组件是比较常见的，很多项目中都会用到。但是每次都从头写一个新的弹窗会比较繁琐，而且会出现代码冗余的问题。这时，我们可以通过使用 Custom Elements 和 Web Components 技术，来实现可复用的弹窗组件。
什么是 Custom Elements 和 Web Components？
Custom Elements 是 Web Components 的一部分，用于创建自定义 HTML 元素。通过 Custom Elements，开发者可以自定义一些 HTML 标签，例如我们这里要实现的弹窗组件。
Web Components 是由 Custom Elements、Shadow DOM 和 HTML Templates 组成的技术组合，旨在提高 Web 开发的可维护性和可重用性。通过使用 Web Components，我们可以封装自定义元素和组件，并在多个项目中重复使用。
实现可复用的弹窗组件
在代码实现之前，我们需要先了解一下 Custom Elements 的 API。Custom Elements 有两个主要的 API：
- customElements.define(tagName, constructor, options) 用于定义一个自定义元素。
- HTMLElement.connectedCallback() 当自定义元素被插入 HTML 文档中时，调用该方法。
下面是一个简单的 Custom Elements 示例：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------------- -
-------------- - ------- --------
-
-
----------------------------------- -----------
---------现在，我们可以通过这个自定义元素来展示一些信息。
接下来，我们将使用 Custom Elements API 来实现弹窗组件。首先，我们需要创建一个模板，模板中包含弹窗的 HTML 结构。
-- -------------------- ---- -------
--------- -------------------
---- --------------
---- ---------------------
--- -------------------------
------- -------------------------------
------
---- ----------------------------
------
-----------接下来，我们来定义一个 PopupModal 类，用于继承 HTMLElement。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------------- - -----------------------------------------
---------------- - ------------------- ----- ------ ------------------------------------------------------
-
------------------- -
----- ----------- - -----------------------------------------------
------------------------------------- -- -- -
-------------
---
-
------------ - --- -
----- -
----- - ------ -------
------- - -------- ---------
----- - --------
------ - --------
- - --------
------------------------------------------------------- - ------
--------------------------------------------------------- - --------
--------------------------------------------------- - ------
---------------------------------------------------- - -------
------------------ - --------
-
------- -
------------------ - -------
-
-在 constructor 方法中，我们使用了 HTML Templates 和 Shadow DOM 来创建了我们的自定义元素。在 connectedCallback 方法中，我们为关闭按钮添加了一个点击事件监听器，用于关闭弹窗。
在 open 方法中，我们使用了 JavaScript 中的对象解构赋值，用于获取弹窗组件的选项信息。然后，我们通过 querySelector 方法来获取到弹窗组件的各个子元素，并设置它们的属性。最后，我们将自定义元素的 style.display 设置为 block，以显示弹窗。
在 close 方法中，我们仅仅将自定义元素的 style.display 设置为 none，以隐藏弹窗。
现在，我们可以像使用标准 HTML 元素一样使用我们的弹窗组件：
-- -------------------- ---- -------
---------------------------
--------
----- ---------- - --------------------------------------
-----------------
------ -------- -- ------ ------- ----- -------
-------- --------- ------------
---
---------这就是我们的弹窗组件的实现方式。我们可以像上面这样，在 HTML 中将我们自定义的元素作为组件使用。然后，通过 JavaScript 中的方法来打开和关闭弹窗，并且根据需要设置弹窗的宽度、高度和内容信息。
总结
通过使用 Custom Elements 和 Web Components，我们可以很容易地创建可复用的弹窗组件。在实现弹窗组件的过程中，我们学习了 Custom Elements API，并使用了 Shadow DOM 和 HTML Templates 技术来创建我们的自定义元素。这个弹窗组件不仅可以在当前项目中使用，也可以在其他项目中重复使用，从而提高了我们开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1b226f6b2d6eab3b87b7d