前言
在前端开发中，弹窗组件可以说是非常常见的一个功能。但是，大多数情况下我们要么使用第三方的弹窗插件，要么自己手写一些基础的弹窗组件。这些做法都有一定的局限性，比如第三方弹窗插件可能并不符合我们的实际需要，而自己手写的基础弹窗组件可能无法扩展和维护。因此，我们需要一种更为灵活和可扩展的方案来实现弹窗组件。
而 Custom Elements 就是一种非常好的解决方案。它是 Web Components 的一部分，而 Web Components 又是一种用于创建可复用组件的浏览器技术。Custom Elements 具有很强的可扩展性和可复用性，可以帮助我们更加方便地实现弹窗组件。
Custom Elements 简介
Custom Elements 是 Web Components 的核心功能之一，它可以让我们创建自定义的 HTML 元素，并可以在它们上面添加自定义的行为。使用 Custom Elements，我们可以创建出一个具有完整生命周期、可以使用 JavaScript 方法、事件和属性的自定义元素。
Custom Elements 主要包括两个部分：
- 定义：定义一个自定义元素，并指定其行为（比如定义一些属性和方法）。
- 注册：将自定义元素注册到浏览器中，使其可以被使用。
下面我们来看一下具体的实现过程。
实现步骤
定义自定义元素
定义自定义元素需要使用 class 关键字和继承 HTMLElement 类，以下是示例代码：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-- ---
-
-- ---
-在 constructor 方法中，我们可以进行一些初始化操作。在自定义元素中，constructor 方法是一个必须的方法。同时，我们还需要定义一些方法来响应用户的行为，比如打开和关闭弹窗，以下是示例代码：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
------------ - ------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- -----
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-
------- -
--------- ---------
---- ----
----- ----
---------- ----------------- ----- ---
------ ------
------- ------
----------------- -----
-
--------
---- ---------------------
--
-
------ -
------------ - -----
---------------------------------- - --------
-
------- -
------------ - ------
---------------------------------- - -------
-
-在上述示例代码中，我们使用私有属性 _isOpen 来表示弹窗是否打开，同时在 constructor 方法中，我们使用 attachShadow 方法创建了一个 Shadow DOM，并设置 mode 为 open，以便外部可以访问。同时，我们在 Shadow DOM 中定义了一些样式和 HTML 结构来实现弹窗的布局。
最后，我们定义了 open 和 close 方法来打开和关闭弹窗。在这些方法中，我们只需要设置 display 属性即可。
注册自定义元素
当我们定义好自定义元素后，接下来就需要将其注册到浏览器中。我们可以通过 window.customElements.define() 方法来实现，以下是示例代码：
window.customElements.define('my-dialog', MyDialog);在上述示例代码中，我们将自定义元素 MyDialog 注册到浏览器中，并指定自定义元素的名称为 my-dialog。
使用自定义元素
在将自定义元素注册到浏览器中后，我们就可以在 HTML 中使用这个元素了。以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ------------
------- ----------------------------
-------
------
-----------------------
------- --------------------------- ---------------
--------
-------- ------------ -
-------------------------------------------
-
---------
-------
-------在上述示例代码中，我们在 HTML 中添加了一个 my-dialog 元素，并添加了一个按钮来调用 open 方法打开弹窗。
总结
本文介绍了如何使用 Custom Elements 实现弹窗组件。在实现过程中，我们需要先定义自定义元素，然后将其注册到浏览器中。最后，在 HTML 中使用这个自定义元素即可。
Custom Elements 的优点在于可以帮助我们实现一个复杂的自定义元素，并为其添加自定义的行为，从而实现更加灵活和可扩展的组件。如果您还没有使用 Custom Elements，强烈建议您学习一下它的使用。
完整代码：https://codepen.io/duzitong/pen/LYGPGzr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645371ba968c7c53b07d51d1