在前端开发中，我们经常需要在页面中加载大量的数据或者资源，这时候就需要一个 Loading 组件来提示用户正在加载中。本文将介绍如何利用 Custom Elements 实现自定义的 Loading 组件，让我们的页面更加美观、灵活。
Custom Elements 是什么？
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素，将其封装成组件并在页面中使用。我们可以通过 JavaScript 来定义一个自定义元素及其行为，然后在 HTML 中使用这个元素。
开始实现自定义的 Loading 组件
我们首先需要创建一个自定义元素，然后在该元素的构造函数中定义我们的组件行为。下面是一个简单的 Loading 组件示例代码：
<my-loading></my-loading>
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- --- - ------------------------------
------------------------- -----------
----- ----- - --------------------------------
----------------- - --------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- -----
-------- -----
---------------- -------
------------ -------
-
--------------- -
-------- ---
------ -----
------- -----
-------------- ----
------- --- ----- --------
----------------- --------
---------- ------- ---- -------- -------
-
---------- ------- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
---
--------------------------
------------------------
-
-
----------------------------------- -----------上面的代码中，我们创建了一个名为 MyLoading 的自定义元素，并在构造函数中定义了我们的组件行为。首先，我们使用 attachShadow 方法创建了一个 shadow DOM，这是一个封闭的 DOM 子树，可以保证我们的组件样式不会被外部的 CSS 影响。然后，我们创建了一个 div 元素，并设置了其 class 为 loading，用于显示 Loading 效果。接着，我们创建了一个 style 元素，并将 Loading 效果的样式写入其中。最后，我们将 style 和 div 元素添加到 shadow DOM 中。
在页面中使用自定义的 Loading 组件
在页面中使用我们的自定义 Loading 组件非常简单，只需要在 HTML 中添加 <my-loading></my-loading> 即可。下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------- ---------------
-------
------
---------- -------- ------- ------------
-------- --- ------ -- ---- --- ------- --------------
------- ---------------------- ----------------
--------
----- ----------- - -- -- -
----- ------- - -------------------------------------
-----------------------------------
------------- -- -
-----------------------------------
-- ------
--
----------------------------------------------------------------- -------------
---------
-------
-------在上面的代码中，我们创建了一个按钮，当用户点击按钮时，会动态创建一个 <my-loading></my-loading> 元素，并将其添加到页面中。然后，我们使用 setTimeout 方法模拟页面加载过程，3 秒后自动移除该元素。
总结
Custom Elements 是 Web Components 的一部分，它允许开发者自定义 HTML 元素，并在页面中使用。我们可以利用 Custom Elements 来实现自定义的 Loading 组件，让我们的页面更加美观、灵活。在实现自定义 Loading 组件的过程中，我们需要创建一个自定义元素，并在其构造函数中定义我们的组件行为。最后，我们可以在页面中使用自定义的 Loading 组件，让用户更好地体验我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6586cb4ed2f5e1655d124d5d