在前端开发中，弹出窗口是一个非常常见的组件。为了实现这个组件，我们通常会使用第三方库或者手写 JavaScript 代码。但是，利用 Web Components 中的 Custom Elements，我们可以很容易地创建一个自定义的弹出窗口组件。
Custom Elements 简介
Custom Elements 是 Web Components 的一部分，它允许我们创建自定义的 HTML 元素并封装它们的功能和样式。通过使用 Custom Elements，我们可以将一个复杂的组件封装成一个独立的自定义元素，然后可以像使用普通的 HTML 元素一样使用它。
创建弹出窗口组件
下面我们来看一下如何使用 Custom Elements 创建一个弹出窗口组件。
1. 定义弹出窗口元素
我们首先需要定义一个弹出窗口元素，可以通过继承 HTMLElement 类来实现：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
-在构造函数中，我们可以添加一些初始化代码。在 connectedCallback 和 disconnectedCallback 函数中，我们可以添加一些与元素生命周期相关的代码。
2. 添加 Shadow DOM
接下来，我们需要为弹出窗口元素添加 Shadow DOM，这样我们就可以将元素内部的样式和功能与外部隔离开来，避免与全局 CSS 样式或 JavaScript 代码发生冲突：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-- ---- --
--------
---- ---------------------
---- ---- ---
------
--
-----------------------------------------------------
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
-在构造函数中，我们使用 attachShadow 方法创建 Shadow DOM，并设置 mode 为 'open'，这样我们就可以在外部访问 Shadow DOM 中的内容。然后，我们创建一个 template 元素，将样式和内容放在其中，并将其添加到 Shadow DOM 中。
3. 添加弹出窗口的功能
接下来，我们需要为弹出窗口添加一些功能，例如显示和隐藏、设置标题和内容等。我们可以通过在元素的属性中添加一些自定义属性来实现这些功能：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-- ---- --
--------
---- ---------------------
--------
---------
------- -------------------------------
---------
---- ----------------
-------------
------
------
--
-----------------------------------------------------
----- ----------- - --------------------------------------
------------------------------------- -- -- -------------
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
------ --- -------------------- -
------ --------- -----------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
----------------------------------------------- - ---------
------
---- ----------
-- --------- --- ------- -
------------
- ---- -
------------
-
------
-
-
------ -
------------------ - --------
-
------ -
------------------ - -------
-
-在上面的代码中，我们添加了一个 header 元素和一个 close-button 元素，用来显示标题和关闭按钮。然后，我们添加了一个 content 元素，用来显示弹出窗口的内容。我们还在 close-button 元素上添加了一个事件监听器，用来监听关闭按钮的点击事件并调用 hide 方法隐藏弹出窗口。
同时，我们还定义了一个 observedAttributes 函数，用来监听元素属性的变化。当 title 属性发生变化时，我们将标题设置为新的值。当 visible 属性发生变化时，我们调用 show 或 hide 方法显示或隐藏弹出窗口。
最后，我们实现了 show 和 hide 方法，用来显示和隐藏弹出窗口。
4. 使用弹出窗口元素
现在我们已经创建了一个自定义的弹出窗口元素，可以在 HTML 中使用它了：
<popup-window title="My Popup Window" visible="true"> <p>This is the content of my popup window.</p> </popup-window>
在上面的代码中，我们创建了一个 popup-window 元素，并设置了 title 和 visible 属性。我们还在元素内部添加了一个 p 元素，用来显示弹出窗口的内容。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
------------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
------ ------
------- ------
----------------- -----
------- --- ----- -----
----------- - - ---- ------- -- -- -----
-------- -----
-
------------- ------ -
-------- -----
------------ -------
---------------- --------------
-------- -----
----------------- --------
-
------------- ------ -- -
------- --
-
------------- ------ ------------- -
----------------- ------------
------- -----
---------- -----
------- --------
-
------------- -------- -
-------- -----
------- -----
--------- -----
-
--------
---- ---------------------
--------
---------
------- -------------------------------
---------
---- ----------------
-------------
------
------
--
-----------------------------------------------------
----- ----------- - --------------------------------------
------------------------------------- -- -- -------------
-
------------------- --
---------------------- --
------ --- -------------------- -
------ --------- -----------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
----------------------------------------------- - ---------
------
---- ----------
-- --------- --- ------- -
------------
- ---- -
------------
-
------
-
-
------ -
------------------ - --------
-
------ -
------------------ - -------
-
-
------------------------------------- -------------总结
通过使用 Custom Elements，我们可以很容易地创建一个自定义的弹出窗口组件，并且可以在 HTML 中像使用普通的 HTML 元素一样使用它。Custom Elements 还可以让我们将组件的样式和功能与外部隔离开来，避免与全局 CSS 样式或 JavaScript 代码发生冲突。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65797189d2f5e1655d37aaec