在前端开发中，我们经常需要向用户发送一些通知消息。这些通知消息可以是提醒用户进行某些操作，或者是告知用户一些重要的信息。为了实现这些功能，我们可以使用 Notification API。
Notification API 是浏览器提供的一个 API，可以用来向用户发送通知消息。在使用 Notification API 时，我们需要创建一个 Notification 对象，并设置一些参数，比如消息内容、标题、图标等。然后，浏览器会在系统通知栏中显示这个通知消息。
但是，使用 Notification API 有一些限制。比如，浏览器可能会阻止弹出通知消息，或者用户可能会关闭通知消息。此外，如果我们需要在多个页面中使用通知消息，就需要在每个页面中都编写相同的代码，这样会增加代码的复杂度和维护成本。
为了解决这些问题，我们可以使用 Custom Elements 来创建一个自定义的 Notification 组件。通过使用 Custom Elements，我们可以将通知消息的逻辑封装在一个组件中，使得组件的使用更加简单和灵活。
下面，我们来详细介绍如何使用 Custom Elements 创建 Notification API。
创建自定义元素
首先，我们需要使用 Custom Elements API 来创建一个自定义的组件。在这个组件中，我们需要定义一些属性和方法，用来设置通知消息的内容、标题、图标等。
-- -------------------- ---- -------
----- --------------------- ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ------ - ------------------- ----- ------ ---
-- ----------- --- --
----- --- - ------------------------------
------------------------- ----------------
------------------------
-- ------------ --- --
----- ------ - ------------------------------
---------------------------- ----------
------------------------
----- ----- - -----------------------------
--------------------------- ---------
--------------------------
----- ------- - ----------------------------
----------------------------- -----------
----------------------------
-- --------
----- -------- - ---------------------------------
------------------------------ ---------
------------------ - ----
---------------------------------- -- -- -
------------
---
-----------------------------
-- -------
-------------------------- ----
---------------------------- ----
------------------------- ----
-
------------------- -
--------------
-
-------- -
----- ----- - ---------------------------
----- ------- - -----------------------------
----- ---- - --------------------------
----- --------- - ----------------------------------------
----- ----------- - ------------------------------------------
----- ---------------- - -----------------------------------------------
------------------- - ------
--------------------- - --------
-------------------------------------- - ---------------
-
------ -
------------------ - --------
-
------ -
------------------ - -------
-
-
---------------------------------------- -----------------------在上面的代码中，我们创建了一个名为 NotificationComponent 的自定义元素。在这个元素中，我们创建了一个 shadow DOM，并在其中添加了一个包含通知消息的 div 元素。我们还创建了一个包含标题和内容的 div 元素，并将其添加到通知消息的 div 元素中。最后，我们还创建了一个关闭按钮，并将其添加到标题和内容的 div 元素中。
在 NotificationComponent 中，我们还定义了一些属性和方法，用来设置通知消息的内容、标题、图标等。具体来说，我们定义了 title、content 和 icon 三个属性，分别代表通知消息的标题、内容和图标。我们还定义了 render 方法，用来渲染通知消息的内容。在 render 方法中，我们获取了 title、content 和 icon 三个属性的值，并将它们分别设置到标题、内容和图标的元素中。
除此之外，我们还定义了 show 和 hide 方法，用来显示和隐藏通知消息。在 show 方法中，我们将通知消息的样式设置为 display: block，使其显示出来。在 hide 方法中，我们将通知消息的样式设置为 display: none，使其隐藏起来。
发送通知消息
在创建了自定义元素之后，我们就可以使用它来发送通知消息了。具体来说，我们可以在页面中创建一个 my-notification 元素，并设置它的属性值，来创建一个通知消息。
<my-notification title="通知标题" content="通知内容" icon="https://example.com/notification-icon.png"></my-notification>
在上面的代码中，我们创建了一个 my-notification 元素，并设置了它的 title、content 和 icon 属性。这样，就可以创建一个包含通知标题、内容和图标的通知消息了。
为了显示这个通知消息，我们可以调用 show 方法。比如，我们可以在页面加载完成后，自动显示这个通知消息。
document.addEventListener('DOMContentLoaded', () => {
const notification = document.querySelector('my-notification');
notification.show();
});在上面的代码中，我们使用 querySelector 方法来获取页面中的 my-notification 元素，并调用它的 show 方法来显示通知消息。
结论
通过使用 Custom Elements，我们可以轻松地创建一个自定义的 Notification 组件，并将通知消息的逻辑封装在组件中。这样，我们就可以在多个页面中使用同一个组件，从而减少代码的复杂度和维护成本。同时，使用自定义元素还可以使代码更加简洁和易于理解。
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ -------- -- ------------ -----------
-------
--------------- -
-------- -----
--------- ------
---- --
----- --
------ -----
------- -----
----------------- --------
------ -----
---------- -----
------------ -----
----------- -------
-------- -----
-
--------------- ------------- -
-------- -----
------------ -------
---------------- -------
------- -----
---------------- ------
-------------------- -------
------------------ ----------
-------- - -----
-
--------------- ------- -
-------- -----
------------ -------
---------------- --------------
------ -----
------- -----
-------- - -----
-
--------------- ------ -
------- --
---------- -----
------------ -----
-
--------------- -------- -
------- --
---------- -----
-
--------------- ------ -
------- -----
----------------- ------------
------ -----
---------- -----
------------ -----
------- --------
-
--------
-------
------
---------------- ------------ -------------- -------------------------------------------------------------------
--------
----- --------------------- ------- ----------- -
------------- -
--------
-- ---- ------ ---
----- ------ - ------------------- ----- ------ ---
-- ----------- --- --
----- --- - ------------------------------
------------------------- ----------------
------------------------
-- ------------ --- --
----- ------ - ------------------------------
---------------------------- ----------
------------------------
----- ----- - -----------------------------
--------------------------- ---------
--------------------------
----- ------- - ----------------------------
----------------------------- -----------
----------------------------
-- --------
----- -------- - ---------------------------------
------------------------------ ---------
------------------ - ----
---------------------------------- -- -- -
------------
---
-----------------------------
-- -------
-------------------------- ----
---------------------------- ----
------------------------- ----
-
------------------- -
--------------
-
-------- -
----- ----- - ---------------------------
----- ------- - -----------------------------
----- ---- - --------------------------
----- --------- - ----------------------------------------
----- ----------- - ------------------------------------------
----- ---------------- - -----------------------------------------------
------------------- - ------
--------------------- - --------
-------------------------------------- - ---------------
-
------ -
------------------ - --------
-
------ -
------------------ - -------
-
-
---------------------------------------- -----------------------
--------------------------------------------- -- -- -
----- ------------ - ------------------------------------------
--------------------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757e2ff890bd9faa439cbd5