前言
Web Components 是一种新的 Web 技术，它可以让我们自定义 HTML 元素，从而实现更加灵活、可复用的 Web 应用程序。Web Components 包含了四个主要的技术：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。其中，Custom Elements 允许我们创建自定义 HTML 元素，而 Shadow DOM 允许我们创建一个独立的 DOM 树，从而实现封装和隔离。
在 Web Components 中，我们通常会将自定义 HTML 元素分为两类：容器组件和展示组件。本文将介绍这两类组件的区别及使用方法。
容器组件
容器组件是一种用于管理其他组件的组件。它通常包含了一些逻辑和状态，以及一些用于渲染其他组件的代码。容器组件的主要作用是将其他组件组合在一起，从而实现更加复杂的 UI 功能。
容器组件通常会使用 Custom Elements 创建自定义 HTML 元素。在创建自定义 HTML 元素时，我们可以通过继承 HTMLElement 类来创建一个新的元素类。例如，下面的代码创建了一个名为 my-container 的自定义 HTML 元素：
class MyContainer extends HTMLElement { constructor() { super(); } } customElements.define('my-container', MyContainer);
在容器组件中，我们通常会使用 Shadow DOM 来创建一个独立的 DOM 树，从而实现封装和隔离。例如，下面的代码在 MyContainer 元素中创建了一个 Shadow DOM：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- -------------------- - - ------- ----- - -------- ------ ------- --- ----- ----- -------- ----- - -------- ------------- -- - - ------------------------------------- -------------展开代码
在这个例子中，我们使用了 :host 伪类来设置容器元素的样式，使用了 <slot> 元素来作为插槽，用于渲染其他组件。
展示组件
展示组件是一种用于展示数据的组件。它通常只包含了一些渲染代码，而没有任何逻辑和状态。展示组件的主要作用是将数据渲染成 UI，从而实现视觉效果。
展示组件通常会使用 HTML Templates 来创建模板。HTML Templates 是一种封装了 HTML 片段的对象，可以通过 JavaScript 来动态地渲染 HTML。例如，下面的代码创建了一个名为 my-list 的自定义 HTML 元素，并使用了一个 HTML Template 来渲染一个列表：
-- -------------------- ---- ------- ----- ------ ------- ----------- - ------------- - -------- ----- -------- - -------------------------------------------- ----- ------- - --------------------------------- ------------------- ----- ------ ------------------------ - - -------------------------------- --------展开代码
在这个例子中，我们使用了 document.getElementById() 方法来获取一个名为 my-list-template 的 HTML Template，然后使用 cloneNode() 方法来克隆模板中的内容，并将其添加到 Shadow DOM 中。
容器组件和展示组件的区别
容器组件和展示组件在功能和实现上有很大的区别。容器组件通常包含了一些逻辑和状态，以及用于渲染其他组件的代码，而展示组件则只包含了一些渲染代码，而没有任何逻辑和状态。容器组件通常使用 Custom Elements 和 Shadow DOM 来创建自定义 HTML 元素，并将其他组件组合在一起，而展示组件通常使用 HTML Templates 来渲染数据。
容器组件和展示组件的区别也反映了组件化设计的思想。在组件化设计中，我们通常将组件分为两类：容器组件和展示组件。容器组件负责管理其他组件，而展示组件负责展示数据。这样可以使我们的代码更加清晰、可维护，从而实现更加高效和可靠的 Web 应用程序。
示例代码
下面是一个完整的示例代码，演示了如何创建一个容器组件和一个展示组件：
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- -------------------- - - ------- ----- - -------- ------ ------- --- ----- ----- -------- ----- - -------- ------ -------------- --------- ------------- ----------- ------------- ----------- ------------- ----------- ---------- -- - - ------------------------------------- ------------- ----- ------ ------- ----------- - ------------- - -------- ----- -------- - -------------------------------------------- ----- ------- - --------------------------------- ------------------- ----- ------ ------------------------ - - -------------------------------- -------- ----- ------ ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- -------------------- - - ------- ----- - -------- ------ -------- ---- - -------- ------------- -- - - -------------------------------- -------- ----- -------- - ----------------------------------- ------------------ - - ------- -- - ----------- ----- ------- -- -------- -- - -------- ---- ------------- ----- -- ----------- - ------------------- ------------------------------------ ----- --------- - --------------------------------------- -------------------------------------展开代码
在这个例子中，我们创建了一个名为 my-container 的容器组件，它包含了一个名为 my-list 的展示组件，并将三个名为 my-item 的展示组件组合在一起。我们还创建了一个 HTML Template，用于渲染 my-list 组件。最后，我们将 my-container 元素添加到页面中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4f03fa941bf713492e669
