前言
在前端开发中，我们经常需要使用到各种组件，比如搜索框、轮播图、弹窗等等。如果每次都从头开始编写这些组件，会浪费很多时间和精力。因此，我们可以使用 Custom Elements 来创建自定义的 HTML 元素，以便在项目中复用。
Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并且可以通过 JavaScript 来操作这些元素。本文将详细介绍如何使用 Custom Elements 来实现一个搜索框组件。
实现搜索框组件
定义搜索框组件
首先，我们需要定义一个搜索框组件。在 HTML 中，我们可以使用 <input> 元素来创建一个搜索框：
<input type="text" placeholder="Search...">
但是，这个搜索框并没有任何样式和功能。因此，我们需要使用 Custom Elements 来创建一个自定义的搜索框组件。
在 JavaScript 中，我们可以使用 window.customElements.define() 方法来定义一个自定义元素。这个方法需要两个参数，第一个参数是元素的名称，第二个参数是元素的定义。
下面是定义搜索框组件的代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
-------------------------- --------
--------------------------------- -------------
----- ----- - --------------------------------
----------------- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
------ -----
----------- -----------
-
--
--------------------------
--------------------------
-
-
------------------------------------------ -----------在这个代码中，我们定义了一个名为 SearchBox 的类，它继承自 HTMLElement。在 constructor 方法中，我们创建了一个 Shadow DOM，并在其中创建了一个 <input> 元素和一个 <style> 元素。然后，我们将这两个元素添加到 Shadow DOM 中。
使用搜索框组件
一旦我们定义了搜索框组件，就可以在 HTML 中使用它了。只需要像使用其他 HTML 元素一样使用它即可：
<search-box></search-box>
这样就可以在页面中显示一个搜索框了。
添加事件处理程序
现在，我们需要给搜索框添加一些交互功能，比如在用户输入时显示搜索结果。为了实现这个功能，我们可以使用 addEventListener() 方法来添加一个 input 事件处理程序：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
-------------------------- --------
--------------------------------- -------------
------------------------------- -- -- -
-- ------
---
----- ----- - --------------------------------
----------------- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
------ -----
----------- -----------
-
--
--------------------------
--------------------------
-
-
------------------------------------------ -----------在这个代码中，我们在 input 元素上添加了一个 input 事件处理程序。当用户输入时，这个处理程序将会被调用，我们可以在其中处理搜索逻辑。
发送请求获取搜索结果
在搜索框输入时，我们需要发送一个请求来获取搜索结果。为了实现这个功能，我们可以使用 fetch() 方法来发送一个 AJAX 请求：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
-------------------------- --------
--------------------------------- -------------
------------------------------- ----- -- -- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
-- ------
---
----- ----- - --------------------------------
----------------- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
------ -----
----------- -----------
-
--
--------------------------
--------------------------
-
-
------------------------------------------ -----------在这个代码中，我们使用 fetch() 方法来发送一个 AJAX 请求，并使用 async/await 来处理异步操作。当请求成功后，我们可以获取到返回的 JSON 数据，并在其中处理搜索结果。
显示搜索结果
最后，我们需要将搜索结果显示在页面上。为了实现这个功能，我们可以在 Shadow DOM 中创建一个 <ul> 元素，并将搜索结果添加到其中：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
-------------------------- --------
--------------------------------- -------------
------------------------------- ----- -- -- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
----- -- - -----------------------------
----------------- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------
---
-----------------------
---
----- ----- - --------------------------------
----------------- - -
----- -
------- --- ----- -----
-------------- ----
-------- ----
------ -----
----------- -----------
-
-- -
----------- -----
-------- --
------- --- - - --
-
-- -
-------- ----
----------------- --------
-------------- ----
-------------- ----
-
--
--------------------------
--------------------------
-
-
------------------------------------------ -----------在这个代码中，我们在 input 元素的事件处理程序中创建了一个 <ul> 元素，并将搜索结果添加到其中。然后，我们将这个 <ul> 元素添加到 Shadow DOM 中。
总结
通过本文的介绍，我们了解了如何使用 Custom Elements 来创建自定义的 HTML 元素，并且实现了一个搜索框组件。这个组件具有良好的交互性和可扩展性，可以在项目中复用。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662f31d9d3423812e4d25d6d