在现代 Web 应用中，自定义组件成为了一个不可或缺的特性。自定义组件可以帮助开发者高效快速地构建复杂的页面结构，并可以重用这些组件以减少重复的工作。而 Custom Elements API 则成为了实现自定义组件的标准。
本文将介绍如何使用 Custom Elements API 开发一个自定义菜单组件。我们会涵盖以下主题：
- 什么是 Custom Elements API
- 开发一个自定义菜单组件
- 如何使用自定义菜单组件
什么是 Custom Elements API
Custom Elements API 是一项由 W3C 制定的 Web 标准，用于创建自定义 HTML 元素。该 API 允许开发者创建自定义元素，并且为这些元素定义行为和样式。 Custom Elements API 的功能基于原生的 Web 组件技术，并且可以与其他 JavaScript 库和框架集成使用。
Custom Elements API 的核心函数为 customElements.define()。该函数接收两个参数：自定义元素的名称和定义该元素行为和样式的类。使用 customElements.define() 函数可以创建自定义元素。例如：
class CustomElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello Custom Element!';
}
}
customElements.define('custom-element', CustomElement);上面的代码创建了一个名为 custom-element 的自定义元素，并且当这个元素被添加到页面后，它会显示 Hello Custom Element!。
开发一个自定义菜单组件
在本节中，我们将开发一个自定义菜单组件。该组件将有以下功能：
- 可以添加不限数量的菜单项
- 当鼠标悬停在某个菜单项上时，该菜单项应该高亮显示
- 当用户单击某个菜单项时，应该在控制台中输出该菜单项的名称
创建自定义元素
首先，我们要创建自定义元素。在这个例子中，我们将使用 ul 和 li 元素来创建菜单组件：
<ul is="custom-menu"> <li>菜单项 1</li> <li>菜单项 2</li> <li>菜单项 3</li> </ul>
代码中的 is 属性是必需的，它告诉浏览器这个 ul 元素是一个自定义元素。
我们现在来定义这个自定义元素的行为和样式。创建一个名为 CustomMenu 的类，并将其扩展自 HTMLElement 类：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
----------------------- -- -------------
-
-
------------------------------------ ------------在 connectedCallback() 函数中，我们添加了一条日志，当这个自定义元素与文档中的 DOM 树连接时，这条日志会在浏览器的控制台中显示出来。
现在我们将这个菜单组件应用到页面上时，浏览器的控制台中应该会显示出 CustomMenu is connected! 记录。
添加菜单项
现在我们要让这个自定义菜单组件支持添加菜单项的功能。我们可以添加一个 addItem() 方法，用于向组件中添加菜单项。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
----------------------- -- -
----- -- - -----------------------------
------------ - -----------
---------------------
---
-
-------------- -
----- ---- - - ----- --
----------------------
----- -- - -----------------------------
------------ - ------
---------------------
-
-
------------------------------------ ------------在构造函数中，我们初始化了一个空数组 items，用于存储菜单项的信息。在 connectedCallback() 函数中，我们遍历 items 数组，并创建一个 li 元素来显示菜单项的标签。最后，我们将这个 li 元素添加到自定义元素中。
在 addItem() 方法中，我们创建了一个包含标签的对象，并将其添加到 items 数组中。然后，我们创建一个 li 元素，显示标签并将其添加到自定义元素中。
添加高亮效果
现在我们要为菜单项添加高亮效果。我们可以添加一个 highlightItem() 方法，用于为指定的菜单项添加高亮效果。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
----------------------- -- -
----- -- - -----------------------------
------------ - -----------
---------------------
---
---------------------------------- - -- -
----- ------ - ---------
-- ---------------- --- ----- -
---------------------------
-
---
--------------------------------- - -- -
----- ------ - ---------
-- ---------------- --- ----- -
---------------------------------------
-
---
-
-------------- -
----- ---- - - ----- --
----------------------
----- -- - -----------------------------
------------ - ------
---------------------
-
------------------- -
----- ----------- - -----------------------------------
-- ------------- -
--------------------------------------------
-
----------------------------------
-
-
------------------------------------ ------------在 connectedCallback() 函数中，我们为菜单组件添加了 mouseover 和 mouseout 事件监听器。当用户将鼠标悬停在菜单项上时，我们调用 highlightItem() 方法为该菜单项添加高亮效果。当用户将鼠标移开时，我们移除该菜单项的高亮效果。
在 highlightItem() 方法中，我们首先从菜单组件中查找已经高亮的菜单项，并将其移除高亮状态。然后，我们为指定的菜单项添加高亮效果。
我们还需要添加一些 CSS 样式，用于定义高亮效果。将以下样式添加到页面中：
.highlighted {
background-color: #eee;
}现在，我们可以在浏览器中查看菜单组件，并将鼠标悬停在某个菜单项上，该菜单项就会高亮显示。
输出菜单项
现在，我们要添加一个 click 事件监听器，用于输出被单击的菜单项。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
----------------------- -- -
----- -- - -----------------------------
------------ - -----------
---------------------
---
---------------------------------- - -- -
----- ------ - ---------
-- ---------------- --- ----- -
---------------------------
-
---
--------------------------------- - -- -
----- ------ - ---------
-- ---------------- --- ----- -
---------------------------------------
-
---
------------------------------ - -- -
----- ------ - ---------
-- ---------------- --- ----- -
--------------------- ----------------------
-
---
-
-------------- -
----- ---- - - ----- --
----------------------
----- -- - -----------------------------
------------ - ------
---------------------
-
------------------- -
----- ----------- - -----------------------------------
-- ------------- -
--------------------------------------------
-
----------------------------------
-
-
------------------------------------ ------------在 connectedCallback() 函数中，我们为菜单组件添加了 click 事件监听器。当用户单击某个菜单项时，我们将该菜单项的标签输出到控制台。
现在，我们的自定义菜单组件已经完成了。我们可以在浏览器中使用以下代码来添加菜单项并查看组件的效果：
const menu = document.querySelector('ul[is="custom-menu"]');
menu.addItem('菜单项 4');
menu.addItem('菜单项 5');如何使用自定义菜单组件
使用自定义菜单组件非常简单。你只需要使用 ul 元素并添加 is 属性来创建菜单组件，然后添加菜单项并为组件设置样式即可。例如：
-- -------------------- ---- -------
-------
-------------------- -
----------- -----
-------- --
------- --
-
-------------------- -- -
-------- --- -----
------- --------
-
--------
--- -----------------
------- ------
------- ------
------- ------
-----
--------
----- ---- - -----------------------------------------------
----------------- ----
----------------- ----
---------通过以上代码，我们可以添加、高亮和输出自定义菜单组件的菜单项。在实际开发中，我们可以基于自定义菜单组件扩展其他自定义组件，并可根据项目需求调整组件样式和行为。
总结
在本文中，我们介绍了如何使用 Custom Elements API 开发一个自定义菜单组件。我们学习了如何创建自定义元素、添加菜单项、添加高亮效果和输出菜单项。这些技术可以帮助我们更高效地构建复杂的 Web 组件，并且可以重用这些组件以减少重复的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501959595b1f8cacdf461f3