随着 Web Components 的出现和发展，我们可以轻松地创建可重用的自定义组件和控件。Web Components 是将 HTML、CSS 和 JavaScript 封装在一起的独立模块，可以进行拓展和复用。在本篇文章中，我们将深入学习如何创建具有动态内容的 Web Components，包括使用 Shadow DOM、模板和数据绑定等技术。
开始前的准备
在开始创建动态内容的 Web Components 之前，需要先了解一些前置技术。首先，要了解 Web Components 的基本理念和工作原理，以及其四个必备部分：
- Custom Elements（自定义元素）：允许我们定义自己的 HTML 标记，比如创建一个
<my-element>标记。 - Shadow DOM（影子 DOM）：允许将 DOM 和样式封装在组件中，使得组件对外部 DOM 和样式的影响最小化。
- HTML Templates（HTML 模板）：定义组件的结构和内容，但实体内容在实例化时才由 JavaScript 动态创建。
- HTML Imports（HTML 导入）：定义组件依赖的外部资源，但是已被舍弃。
在此基础上，我们需要了解动态内容的几个关键点：
- 如何使用模板定义组件的结构；
- 如何使用脚本动态地修改模板中的内容；
- 如何使用数据绑定来更新模板中的内容；
- 如何将组件与其他页面元素通信并响应事件。
有了这些准备，我们就可以开始探索如何创建具有动态内容的 Web Components 了。
创建具有动态内容的 Web Components
第一步：创建 Web 组件
我们首先创建一个简单的 Web Components，在其中包含了一个 <ul> 元素、一个 <input> 元素和一个 button 元素。其中，<ul> 元素的内容是一个数组 list 中的动态内容，我们将在后续的步骤中动态更新它，代码如下：
-- -------------------- ---- -------
--------- -----------------
-------
-- -
----------- -----
-
--------
---------
------ ------------
--------------------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------
----- --------------- - ---------------------------------
------------------- ----- ------ --------------------------------
-
-
-------------------------------------------- -------------
---------这个组件仅仅只是将 <template> 标签中的内容添加到一个 WebComponents 容器中，因为我们暂时没有添加动态内容。我们要动态更新 <ul> 列表中的内容，接下来我们将分步骤来了解如何实现。
第二步：动态添加 Web 组件内容
第一步是向 Web 组件中添加动态内容，这就要使用到 Shadow DOM 的方法。我们将为 Web 组件添加一个 addList 方法，该方法会向组件的 <ul> 元素中添加新的 <li> 元素。方法可以使用 appendChild 来添加新元素，而 querySelector 方法用于获取 <ul> 元素。代码如下：
-- -------------------- ---- -------
--------- -----------------
-------
-- -
----------- -----
-
--------
---------
------ ------------
--------------------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------
----- --------------- - ---------------------------------
------------------- ----- ------ --------------------------------
------- - ------------------------------------
---------- - ---------------------------------------
----------- - ----------------------------------------
------------------------------------- -- -- -
----- -- - -----------------------------
-------------- - -----------------
------------------------
---
-
-
-------------------------------------------- -------------
---------上面的代码会在点击 Web Component 中的按钮时添加新的元素，并将该元素的文本内容设置为输入框中的文本。
第三步：使用数据绑定更新内容
最后一步是使用数据绑定来更新 Web Component 中的内容。我们可以通过在组件中添加数据绑定来实现这一点。具体来说，我们可以添加一个 list 属性来存储 Web Component 中的列表，然后使用数据绑定将这个属性绑定到我们的 UI 中。下面的代码演示了如何使用数据绑定更新 Web Component 传递到列表中的数据和 Web 组件实例：
-- -------------------- ---- -------
--------- -----------------
-------
-- -
----------- -----
-
--------
----
-- --- ---- -- ---- --
------ ---- -------
-- ------ --
-----
------ ----------- ---------------------- ----------------------
------- -----------------------------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------
----- --------------- - ---------------------------------
------------------- ----- ------ --------------------------------
--------- - --------- --------- ----------
-
------------------- -
------- - ------------------------------------
---------- - ---------------------------------------
----------- - ----------------------------------------
----------------
-------------------------
-
---------- -
-------------------------------------------- - ----------------
----- ----- - -------------------- -- -----------------------------
--------------------------------------------- - ------
-
------------------- -
----- ---------- - ---------------------------------------
------------------------------------ ------- -- -
--------------- - -------------------
----------------
---
------------------------------------- -- -- -
--------------------------------
--------------- - ---
----------------
---
-
--- ------------ -
------ -------------------------------- -- ---
-
--- ----------------- -
-------------------------------- -------
-
------ --- -------------------- -
------ ----------------
-
------------------------------ --------- --------- -
-- ----- --- ------------- -- -------- --- --------- -
----------------
-
-
-
-------------------------------------------- -------------
---------在上面的代码中，我们将 <input> 标签中的 value 属性绑定到 Web Component 实例的 inputValue 属性上，使用 {{inputValue}} 语法，在他们更新时使用 updateUI 函数来更新 UI。 subscribeUIEvents 函数订阅了 input 中的input事件和按钮的click 事件，并在发生 event 时调用更新 UI。
结论
本篇文章旨在介绍如何创建具有动态内容的 Web Components。我们首先了解了 Web Components 的基本理念和工作原理，以及其四个必备部分。然后我们深入了解了如何通过使用 Shadow DOM、模板和数据绑定等技术来创建具有动态内容的 Web Components。这些技术可以将组件与其他页面元素通信，并在事件上响应打开或关闭事件，或更新分页内容。最后，通过本文你可以收获到更多的技巧，并在实际项目中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673415870bc820c582466679