前言
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：
// www.javascriptcn.com code example
class MyContainer extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
:host {
display: block;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-container', MyContainer);在这个例子中，我们使用了 :host 伪类来设置容器元素的样式，使用了 <slot> 元素来作为插槽，用于渲染其他组件。
展示组件
展示组件是一种用于展示数据的组件。它通常只包含了一些渲染代码，而没有任何逻辑和状态。展示组件的主要作用是将数据渲染成 UI，从而实现视觉效果。
展示组件通常会使用 HTML Templates 来创建模板。HTML Templates 是一种封装了 HTML 片段的对象，可以通过 JavaScript 来动态地渲染 HTML。例如，下面的代码创建了一个名为 my-list 的自定义 HTML 元素，并使用了一个 HTML Template 来渲染一个列表：
// www.javascriptcn.com code example
class MyList extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-list-template');
const content = template.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(content);
}
}
customElements.define('my-list', MyList);在这个例子中，我们使用了 document.getElementById() 方法来获取一个名为 my-list-template 的 HTML Template，然后使用 cloneNode() 方法来克隆模板中的内容，并将其添加到 Shadow DOM 中。
容器组件和展示组件的区别
容器组件和展示组件在功能和实现上有很大的区别。容器组件通常包含了一些逻辑和状态，以及用于渲染其他组件的代码，而展示组件则只包含了一些渲染代码，而没有任何逻辑和状态。容器组件通常使用 Custom Elements 和 Shadow DOM 来创建自定义 HTML 元素，并将其他组件组合在一起，而展示组件通常使用 HTML Templates 来渲染数据。
容器组件和展示组件的区别也反映了组件化设计的思想。在组件化设计中，我们通常将组件分为两类：容器组件和展示组件。容器组件负责管理其他组件，而展示组件负责展示数据。这样可以使我们的代码更加清晰、可维护，从而实现更加高效和可靠的 Web 应用程序。
示例代码
下面是一个完整的示例代码，演示了如何创建一个容器组件和一个展示组件：
// www.javascriptcn.com code example
class MyContainer extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
:host {
display: block;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<h2>My Container</h2>
<my-list>
<my-item>Item 1</my-item>
<my-item>Item 2</my-item>
<my-item>Item 3</my-item>
</my-list>
`;
}
}
customElements.define('my-container', MyContainer);
class MyList extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-list-template');
const content = template.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(content);
}
}
customElements.define('my-list', MyList);
class MyItem extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
:host {
display: block;
padding: 5px;
}
</style>
<slot></slot>
`;
}
}
customElements.define('my-item', MyItem);
const template = document.createElement('template');
template.innerHTML = `
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
<ul>
<slot></slot>
</ul>
`;
template.id = 'my-list-template';
document.body.appendChild(template);
const container = document.createElement('my-container');
document.body.appendChild(container);在这个例子中，我们创建了一个名为 my-container 的容器组件，它包含了一个名为 my-list 的展示组件，并将三个名为 my-item 的展示组件组合在一起。我们还创建了一个 HTML Template，用于渲染 my-list 组件。最后，我们将 my-container 元素添加到页面中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4f03fa941bf713492e669