在前端开发中，创建一个多级菜单是一个常见的需求。今天我们将了解如何使用 Custom Elements API 来创建一个包含多级菜单的自定义元素。
Custom Elements API 是什么？
Custom Elements API 是一个 Web API 规范，可以让开发者定义自己的 HTML 元素，并指定其行为。使用 Custom Elements，可以创建自己的 UI 控件，甚至可以扩展默认元素的行为。
Custom Elements API 支持以下几个方法：
customElements.define(tagName, constructor)：定义一个自定义元素。connectedCallback()：当元素被插入到文档中时调用。disconnectedCallback()：当元素从文档中删除时调用。adoptedCallback()：当元素被移动到一个新的文档时调用。attributeChangedCallback(attrName, oldVal, newVal)：当元素的属性值发生改变时调用。
创建多级菜单
在 Custom Elements 中使用 JavaScript 类来创建自定义元素。我们将创建一个 multilevel-menu 元素，它包含多个子元素，每个子元素都是一个菜单项。每个菜单项都可以包含它自己的子菜单项。下面是代码示例：
---- -------- ---
--------- ------------------------------
-------
---------- -
------- --------
-------- -----
-
--------- -
-------- -----
-
--------
---- ------------------
----- --------------------------
----- ----------------------
------
---- -----------------------
-----------
--------
----- -------------- ------- ----------- -
------------- -
--------
-- ----
----- -------- - ----------------------------------------------------
-- ------
----- --------------- - ---------------------------------
-- ------------
----- --------- - ---------------------------------------------
----- ------------ - -------------------------------------------
-- ------
----- ----- - ---------------------------
------------------- - ------
-- -------------
----- --------- - --------------------------------------------
--- ------ -------- -- ---------- -
----- ---------- - ------------------------------------------
-------------------------------- ----------------
------------------------------------- --------------------------------
-------------------------------------
-
-- ---------------
----- -------- - --------------------------------------------
---------------------------------- -- -- -
----- ------- - ----------------------------
--------------------- - ---------------------- --- -------- - ------ - --------
-------------------------------------------- - ---------------------- --- -------- - --- - ----
---
-- ----------
----- ---------- - ------------------------ ---------
----------------------------------------
-
-
-- ----
---------------------------------------- ----------------
---------解释上述代码
这里我们使用了一个 template 元素，它包含了菜单项模板。模板包括一个 menu-item class 元素，用于表示菜单项的标题和箭头，以及一个 sub-menu class 元素，用于包含菜单项的子项。
在 MultiLevelMenu 构造函数中，我们首先获取之前我们定义的 multilevel-menu-template 模板，并克隆其内容。通过查询选择器获取菜单标题和菜单项列表，然后设置菜单标题内容，并将菜单项添加到菜单项列表中。对于每个子菜单项，我们都将其构造为一个新的 multilevel-menu 元素，并将其添加到菜单项列表中。
为了创建标题和箭头之间的交互，我们获取 menu-item 元素，并为其添加单击事件侦听器。单击事件侦听器将获取下一个元素（即具有 sub-menu class 的元素），并设置其 display 属性以实现展开/折叠菜单项。
最终，我们将合并样式和模板，并通过调用 attachShadow 方法将它们添加到自定义 MultiLevelMenu 元素的 shadow DOM 中。
如何使用多级菜单
要在 HTML 中使用多级菜单，我们可以这样做：
---------------- ------------ -------------
- -------- ---- ------ -------- -- --
- -------- ----- ------ -------- -
- -------- ----- -------- -------- -
- -------- ----- --- -------- -- --
- -------- ----- --- -------- -- -
---
- -------- ----- -------- -------- -- -
-
-
---------------------这段代码将创建一个包含两个菜单项的 multilevel-menu 元素，标题为 "File"。第一个菜单项没有子项，第二个菜单项包含两个子项，其中包含其自己的子项。如果您在浏览器中运行此代码，您将获得一个可展开的多级菜单，如下所示：
总结
本文中，我们使用 Custom Elements API 和 JavaScript 类创建了一个多级菜单，包含许多菜单项和子菜单项。此外，我们向您展示了如何在 HTML 中使用此多级菜单，并添加了一个演示图。
Custom Elements 可以使我们创建可重用的自定义 UI 控件，如果你想深入学习，建议你仔细研究此 API，同时理解其底层原理。希望这篇文章对您有所启发并帮助您。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6451d9f5675af4061b597d85