前言
自定义元素是 Web 组件中最强大的部分之一。在 Web Components 规范中，自定义元素是一种允许开发人员在 DOM 上创建自定义标签的机制。使用自定义元素，开发人员可以将组件封装在单独的标签中，然后在应用程序中使用它们。
在这篇文章中，我们将使用 Custom Elements 创建一个自定义下拉列表控件。
目录
- 自定义元素简介
- 创建自定义下拉列表
- 组件基础结构
- 添加下拉选项
- 处理用户交互事件
- 组件样式
- 总结
自定义元素简介
在 Web Components 规范中，自定义元素是一种允许开发人员在 DOM 上创建自定义标签的机制。使用自定义元素，开发人员可以将组件封装在单独的标签中，然后在应用程序中使用它们。自定义元素还提供了回调方法，以便在元素被添加或删除时执行代码。
使用 Custom Elements API，您可以在您的应用程序中创建和注册自定义元素，并提供自定义样式和交互行为，这使得在应用程序中重复使用这些元素变得非常方便。
创建自定义下拉列表
在本教程中，我们将创建一个自定义下拉列表控件，该控件将包含一个按钮和一个选项列表。当用户单击按钮时，下拉列表将在用户界面中下拉，显示所有可用选项。当用户从选项列表中选择一个选项时，下拉列表将关闭，并将所选选项的值设置为按钮的文本。
组件基础结构
我们从组件的基础结构开始。为了创建一个自定义元素，我们必须使用 customElements.define() 方法将组件注册到 DOM 中。使用此方法，我们可以为组件指定自定义标记名称，并将组件的功能封装在一个类中。以下是我们的组件类的基本结构：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-- --- ---- ------- ----- ----
-
-
-------------------------------------- --------------在上面的代码中，我们定义了一个名为 DropdownList 的类，该类继承自 HTMLElement。在类的构造函数中，我们可以实现组件的逻辑代码。
接下来，我们将在组件的构造函数中添加一些必要的元素以及用于处理交互事件的代码。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-- ------ --- --------- --------
----- ------ - ------------------- ----- ------ ---
----- --------- - ------------------------------
----- ------ - ---------------------------------
----- ---- - -----------------------------
-- --- -- --- -------- ----- ----
---------------- - ------ -- --------
-- --- -- --- -------
----- ------- - -
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
--
-- --- --- ------- -- --- ----
------------------------ -- -
----- -- - -----------------------------
------------ - ------------
----------------------------- --------------
---------------------
---
-- --- --- --------- ----- ---------
-------------------------------- -- -- -
------------------------------
---
------------------------------ ------- -- -
----- -------------- - -------------
---------------- - -------------------------
------------------------------
---
-- --- --- --------- ------
----- ----- - --------------------------------
----------------- - -
------ -
------ ------
-------- -----
------- -----
----------------- --------
-
-- -
----------- -----
-------- --
------- --
------- --- ----- -----
--------- ---------
---- -----
----- --
------ ------
----------------- -----
-------- -----
-
----- -
-------- ------
-
--
-- ------ --- -------- -- --- ------ ---
--------------------------
------------------------------
------------------------------
----------------------------
-
-
-------------------------------------- --------------在上面的代码中，我们创建了一个包含按钮和选项列表的容器 div 元素，并将其添加到组件的根元素中。然后，我们将选项添加到选项列表中，并为按钮和选项列表添加了必要的事件侦听器，以便以应用程序中的交互操作。
我们还添加了一些 CSS 样式，用于定义组件的外观和行为。
添加下拉选项
现在，我们已经添加了一个选项列表，但是如果我们想要向列表中添加更多选项，我们需要复制和粘贴选项代码，并将每个选项的值和文本更改为新值。这是很不灵活的，会让我们感到痛苦。
为了解决这个问题，我们可以添加一种机制，以便通过传递选项数组来动态设置选项列表。我们可以通过为组件添加一个名为 options 的属性并在构造函数中侦听该属性来实现此目的。以下是添加此功能的代码：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-- ------ --- --------- --------
----- ------ - ------------------- ----- ------ ---
----- --------- - ------------------------------
----- ------ - ---------------------------------
----- ---- - -----------------------------
-- --- -- --- -------- ----- ----
---------------- - ------ -- --------
-- - ------- ------- -----
----- -------------- - -
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
--
-- --- -- --- -------
----- ------- - ------------ -- ---------------
-- --- --- ------- -- --- ----
------------------------ -- -
----- -- - -----------------------------
------------ - ------------
----------------------------- --------------
---------------------
---
-- --- --- --------- ----- ---------
-------------------------------- -- -- -
------------------------------
---
------------------------------ ------- -- -
----- -------------- - -------------
---------------- - -------------------------
------------------------------
---
-- --- --- --------- ------
----- ----- - --------------------------------
----------------- - -
------ -
------ ------
-------- -----
------- -----
----------------- --------
-
-- -
----------- -----
-------- --
------- --
------- --- ----- -----
--------- ---------
---- -----
----- --
------ ------
----------------- -----
-------- -----
-
----- -
-------- ------
-
--
-- ------ --- -------- -- --- ------ ---
--------------------------
------------------------------
------------------------------
----------------------------
-
--- --------- -
------ -----------------------------------------
-
--- -------------- -
---------------------------- -----------------------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
-- ----- --- --------- -- -------- --- --------- -
---------------
-
-
------------------- -
---------------
-
--------- -
----- ---- - ------------------------------------
----- ------- - -------------
-------------- - ---
------------------------ -- -
----- -- - -----------------------------
------------ - ------------
----------------------------- --------------
---------------------
---
-
-
-------------------------------------- --------------在上面的代码中，我们向组件添加了一个名为 options 的属性，以便动态设置选项。然后，我们在构造函数中查找 options 属性，并在列表中添加每个选项。
我们还使用 set 和 get 访问器方法创建了一个简单的观察模式，以便每当 options 属性更改时重新渲染选项列表。
处理用户交互事件
现在，我们已经为按钮添加了一个单击侦听器，以便展开和折叠选项列表。我们还添加了一个单击事件侦听器，以便在用户从选项列表中选择一个选项时；我们需要将所选选项的文本添加到按钮上，并将选项列表收起来。
下面是我们的组件代码：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
-- ------ --- --------- --------
----- ------ - ------------------- ----- ------ ---
----- --------- - ------------------------------
----- ------ - ---------------------------------
----- ---- - -----------------------------
-- --- -- --- -------- ----- ----
---------------- - -------------------------------- -- ------ -- --------
-- - ------- ------- -----
----- -------------- - -
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
- ------ ---- ----- ------- -- --
--
-- --- -- --- -------
----- ------- - ------------ -- ---------------
-- --- --- ------- -- --- ----
------------------------ -- -
----- -- - -----------------------------
------------ - ------------
----------------------------- --------------
---------------------
---
-- --- --- --------- ----- ---------
-------------------------------- -- -- -
------------------------------
---
------------------------------ ------- -- -
----- -------------- - -------------
---------------- - -------------------------
------------------------------
----- ------------- - --- ----------------- -
------- - ------ ----------------------------------------- --
-------- -----
--------- -----
---
----------------------------------
---
-- --- --- --------- ------
----- ----- - --------------------------------
----------------- - -
------ -
------ ------
-------- -----
------- -----
----------------- --------
-
-- -
----------- -----
-------- --
------- --
------- --- ----- -----
--------- ---------
---- -----
----- --
------ ------
----------------- -----
-------- -----
-
----- -
-------- ------
-
--
-- ------ --- -------- -- --- ------ ---
--------------------------
------------------------------
------------------------------
----------------------------
-
--- --------- -
------ -----------------------------------------
-
--- -------------- -
---------------------------- -----------------------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
-- ----- --- --------- -- -------- --- --------- -
---------------
-
-
------------------- -
---------------
-
--------- -
----- ---- - ------------------------------------
----- ------- - -------------
-------------- - ---
------------------------ -- -
----- -- - -----------------------------
------------ - ------------
----------------------------- --------------
---------------------
---
-
-
-------------------------------------- --------------我们还向选项列表添加了一个自定义事件，以便应用程序可以在用户选择一个选项时处理选项值。
组件样式
最后，我们将添加一些样式以将下拉列表控件的外观与样式相匹配。下面是我们将使用的 CSS 样式：
-- -------------------- ---- ------- ------ - ------ ------ -------- ----- ------- ----- ----------------- -------- - -- - ----------- ----- -------- -- ------- -- ------- --- ----- ----- --------- --------- ---- ----- ----- -- ------ ------ ----------------- ----- -------- ----- - ----- - -------- ------ -
总结
在本文中，我们使用 Custom Elements API 构建了一个自定义下拉列表控件。我们学习了如何使用自定义元素创建组件，并使用属性和事件处理程序动态设置和处理元素中的内容。此外，我们还添加了一些 CSS 样式以改善组件的外观。
本文提供的代码示例和概念将提供您创造自定义组件和使用 Web Components API 的基础知识。无论您是新手还是专家，此教程都将使您的组件开发过程更高效和容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a232e948841e9894e7f6f7