Web Components 是一种新的 Web 技术，它可以帮助我们创建可重用的自定义 HTML 元素和组件。在本文中，我们将使用 Web Components 实现一个简单的 TODO List 应用程序。
什么是 Web Components？
Web Components 是一组 Web 平台 API，它们允许我们创建可重用的自定义元素和组件。Web Components 由四个主要技术组成：
- Custom Elements：允许我们创建自定义 HTML 元素。
- Shadow DOM：允许我们封装元素的样式和行为。
- HTML Templates：允许我们定义可重用的 HTML 片段。
- HTML Imports：允许我们导入和重用 HTML 片段。
Web Components 的一个重要优点是它们可以跨浏览器和框架使用。这使得它们成为构建可重用组件的理想选择。
实现 TODO List 应用程序
我们将使用 Web Components 实现一个简单的 TODO List 应用程序。该应用程序将包含以下组件：
todo-list：显示所有未完成的任务。todo-item：表示单个待办事项。todo-input：允许用户添加新的待办事项。
创建 todo-list 组件
我们将从创建 todo-list 组件开始。该组件将显示所有未完成的任务，并提供一个用于添加新任务的按钮。
-- -------------------- ---- -------
--------- ------------------------
-------
-- -- --
--------
---- ------------------
-------- ---------
--- ------------------------
-------------------------
------
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
-
-
---------------------------------- ----------
---------在上面的代码中，我们首先定义了一个 template 元素，并在其中定义了 todo-list 组件的 HTML 结构和样式。我们还在模板中添加了一个 todo-input 元素，用于添加新任务。
接下来，我们创建了一个 TodoList 类，它继承自 HTMLElement。在构造函数中，我们获取了模板的内容，并将其附加到了组件的 Shadow DOM 中。
最后，我们通过调用 customElements.define 将 TodoList 类注册为一个自定义元素。
创建 todo-item 组件
接下来，我们将创建 todo-item 组件。该组件将表示单个待办事项，并提供一个用于标记该任务已完成的复选框。
-- -------------------- ---- -------
--------- ------------------------
-------
-- -- --
--------
--- ------------------
------ --------------- ----------------------
----- -------------------------
-----
-----------
--------
----- -------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
------------- - -------------------------------------------
--------- - ---------------------------------------
-
------ --- -------------------- -
------ -------- -------------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
--------------------- - ---------
- ---- -- ----- --- ------------ -
--------------------- - -------- --- -----
-
-
-
---------------------------------- ----------
---------在上面的代码中，我们定义了一个 template 元素，并在其中定义了 todo-item 组件的 HTML 结构和样式。我们还定义了一个 checkbox 和一个 text 属性，用于访问组件中的复选框和文本元素。
接下来，我们创建了一个 TodoItem 类，它继承自 HTMLElement。在构造函数中，我们获取了模板的内容，并将其附加到了组件的 Shadow DOM 中。我们还使用 querySelector 方法获取了 checkbox 和 text 元素，并将它们存储在组件的属性中。
最后，我们定义了一个 observedAttributes 静态属性，它返回了我们希望观察的属性列表。当这些属性发生变化时，attributeChangedCallback 方法将被调用。在这个方法中，我们根据属性的名称更新了组件中的文本和复选框状态。
创建 todo-input 组件
最后，我们将创建 todo-input 组件。该组件将允许用户添加新的待办事项。
-- -------------------- ---- -------
--------- -------------------------
-------
-- -- --
--------
----- -------------------
------ ----------- ----------------------- ---------------- --- ---------
------- ------------- --------------------------------------
-------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -------------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
---------- - ---------------------------------------------
--------- - ----------------------------------------
------------------------------------ ------------------------------
-
------------------- -
-----------------------
----- ---- - ------------------------
-- ------ -
----- ---- - ------------------------------------
------------------------- ------
---------------------- ------------------ - ------- ---- ----
---------------- - ---
-
-
-
----------------------------------- -----------
---------在上面的代码中，我们定义了一个 template 元素，并在其中定义了 todo-input 组件的 HTML 结构和样式。我们还定义了一个 input 和一个 form 属性，用于访问组件中的文本输入和表单元素。
接下来，我们创建了一个 TodoInput 类，它继承自 HTMLElement。在构造函数中，我们获取了模板的内容，并将其附加到了组件的 Shadow DOM 中。我们还使用 querySelector 方法获取了 input 和 form 元素，并将它们存储在组件的属性中。我们还为表单元素添加了一个 submit 事件监听器，以便在用户提交表单时调用 handleSubmit 方法。
在 handleSubmit 方法中，我们首先阻止了表单的默认行为。然后，我们获取了输入框中的文本，并创建了一个新的 todo-item 元素。我们将文本作为 text 属性设置在元素上，并通过 CustomEvent 将其发送到父组件。最后，我们将输入框的值重置为一个空字符串。
将组件组合在一起
现在我们已经创建了所有必要的组件，我们可以将它们组合在一起以创建一个完整的 TODO List 应用程序。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- ------------ ------- ---------------------------- ------- ---------------------------- ------- ----------------------------- ------- ------ ----------------------- ------- -------
在上面的代码中，我们创建了一个 HTML 文件，并将 todo-list 组件添加到其中。我们还在文件头部引入了所有必要的组件脚本。
现在，我们可以在浏览器中打开该文件，并开始使用我们的 TODO List 应用程序了！
总结
在本文中，我们使用 Web Components 实现了一个简单的 TODO List 应用程序。我们创建了三个组件：todo-list、todo-item 和 todo-input。我们还介绍了 Web Components 的四个主要技术，并解释了如何使用它们来创建可重用的 HTML 元素和组件。
通过学习本文中的示例代码，我们可以了解如何使用 Web Components 构建可重用的组件，并将其应用于实际应用程序中。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e5915a1886fbafa4123226