51、深入理解 Web 组件技术

深入理解 Web 组件技术

1. 模板（Template）的使用

模板在构建网页元素结构时非常有用，它允许我们定义可复用的结构。以下是一个使用模板向表格添加行的示例：

let tableBody = document.querySelector("tbody");
let template = document.querySelector("#row");
let clone = template.content.cloneNode(true);  // deep clone
// ...Use the DOM to insert content into the <td> elements of the clone...
// Now add the cloned and initialized row into the table
tableBody.append(clone);

模板元素不一定要在 HTML 文档中显式出现才能发挥作用。我们可以在 JavaScript 代码中创建模板，使用 innerHTML 创建其子元素，然后根据需要进行克隆，避免了每次都解析 innerHTML 的开销。这是 HTML 模板在 Web 组件中常见的使用方式。

2. 自定义元素（Custom Elements）

自定义元素是 Web 组件的重要特性之一，它允许我们将 JavaScript 类与 HTML 标签名关联起来，使得文档中所有该标签自动转换为 DOM 树中该类的实例。