前言
Custom Elements 是 Web Components 中的一部分，它的作用是让我们可以自定义 HTML 标签，使我们的代码更加可读、可维护和可重用。在本文中，我们将使用 Custom Elements 来实现一个折叠面板组件，以便学习如何使用 Custom Elements 及其相关技术。
技术要点
在我们实现折叠面板组件之前，我们需要先了解一些与 Custom Elements 相关的技术要点：
Shadow DOM
Shadow DOM 翻译为「影子 DOM」，是指一种独立的 DOM 树结构，它与主文档 DOM 树结构隔离，有自己的子节点和样式。通过使用 Shadow DOM 可以实现组件的封装，防止样式和 HTML 结构的污染。在 Custom Elements 中，每一个自定义元素都可以绑定一个 Shadow DOM。
HTML Templates
HTML Templates 是定义了一个 HTML 片段的 JavaScript 物件，它与 HTML 标签的定义相似（但却不是标签），可以用来重复使用和定义可重用的 HTML 片段。在 Custom Elements 中，我们将使用 HTML Templates 来定义自定义元素的 HTML 结构和样式。
Custom Elements
Custom Elements 是一组使开发人员能够自定义 HTML 标签、标签的行为和属性的 Web API，它提供了四个生命周期回调：connectedCallback，disconnectedCallback，attributeChangedCallback 和 adoptedCallback，这些生命周期回调可以让我们与自定义元素的生命周期进行交互。
实现折叠面板组件
定义组件
首先，我们需要定义一个自定义元素，并绑定一个 Shadow DOM，我们可以使用 window.customElements API 来定义一个自定义元素，如下所示：
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- --------------- - ---------------------------------
----- ---------- - ------------------- ----- ------ ---
----------------------------------------
-
------------------- --
---------------------- --
-------------------------- --
----------------- --
-
------------------------------------------------- ------------------在上面的代码中，我们定义了一个名为 CollapsiblePanel 的类，并将其继承于 HTMLElement 类，这意味着我们的 CollapsiblePanel 类将具有所有 HTML 元素的特性。
在构造函数中，我们首先获取一个 HTML 模板，并使用 cloneNode 方法来克隆这个模板，然后使用 attachShadow 方法将 Shadow DOM 绑定到自定义元素上，并将模板节点添加到 Shadow DOM 中。
在我们的 CollapsiblePanel 类中，我们还需要实现四个生命周期回调：connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。在这个例子中，我们暂时不需要用到这些生命周期回调，因此内部没有实现任何逻辑。
定义模板
在定义组件后，我们需要定义我们的折叠面板组件的 HTML 结构和样式。为了做到这一点，我们可以使用 HTML Templates。我们可以在 HTML 文件中定义一个模板，并使用 querySelector 方法获取它，如下所示：
-- -------------------- ---- -------
--------- --------------------------------
-------
------ -
-------- -----
---------------- --------------
------------ -------
------- -----
------------ -----
------- --------
-
----- -
----------- --
--------- -------
----------- ---------- ----- ---------
-
-------------- -
----------- ------
-
--------
---- -------------------------
---- -------------
-------------
------
-----------在上面的代码中，我们定义了一个具有 id 为 collapsible-panel-template 的 HTML 模板，里面包含了折叠面板的 HTML 结构和样式。其中，我们通过 slot 来给折叠面板组件添加内容占位符。
实现折叠面板逻辑
为了使我们的折叠面板组件实际工作，我们需要添加一些 JavaScript 代码，并将组件的状态存储在自定义元素的属性中。
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
-------------- - -----
----- -------- - ------------------------------------------------------
----- --------------- - ---------------------------------
----- ---------- - ------------------- ----- ------ ---
----------------------------------------
---------- - ----------------------------------------
--------- - ---------------------------------------
------------------------------------ -- -- -
-------------- - ----------------
-------------------------------------- -----------------
---
-
------------------- --
---------------------- --
-------------------------- --
----------------- --
-
------------------------------------------------- ------------------在上面的代码中，我们添加了一个 collapsed 属性来表示折叠面板组件是否处于折叠状态。我们还在构造函数中获取了 label 和 body 元素，并使用 addEventListener 方法在 label 元素上添加了点击事件，当用户点击时，我们将 collapsed 属性取反，并使用 classList.toggle 方法来添加或删除 expanded 类，以根据 collapsed 变量的 true/false 来控制 body 元素的高度。
Demo
最后，让我们看一下如何使用这个自定义元素：
<collapsible-panel> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, elementum </p> </collapsible-panel>
在这个例子中，我们将一个段落标签包含在折叠面板组件中，并通过将组件与 Web 页面上其他元素结合来使用。
结论
在本文中，我们通过 Custom Elements 让 Web 开发人员可以自定义 HTML 标签来构建可重用的组件，并利用 Shadow DOM 和 HTML Templates 来实现对组件内部的私有 HTML 和样式的封装。同时，我们还学习了在自定义元素类中的四个生命周期回调方法：connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback，这些方法能够让我们与自定义元素的生命周期进行交互。
在开发应用程序时，使用 Custom Elements 可以使代码更加具有可读性、可维护性和可重用性。通过本文，我们学会了如何使用 Custom Elements 实现一个折叠面板组件，我们期望您能将这些技术应用到您自己的 Web 开发项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67087a75d91dce0dc87188cd