Web Components 概述：自定义元素、影子 DOM 和 HTML 导入 / 导出-JavaScript中文网-JavaScript教程资源分享门户

Web Components 概述：自定义元素、影子 DOM 和 HTML 导入 / 导出

Web Components 是 Web 平台上的一项技术，它为开发者提供了一种创建可复用的组件的方式，这些组件是跨框架、跨库、跨浏览器的。Web Components 由三个技术组成：自定义元素、影子 DOM 和 HTML 导入 / 导出。

自定义元素

自定义元素是一种新的 DOM 元素类型，可以用 JavaScript 定义并注册。它可以扩展现有元素或创建全新的自定义元素。自定义元素具有与内置元素相似的语义和行为，并在 HTML 文档中使用它们时支持相同的 API、事件和属性。

如果您想要创建一个自定义元素，可以使用 HTMLElement API 来定义一个类，并通过 customElements.define() 方法将其注册。例如，下面的例子定义了一个表示剩余任务条目数的自定义元素：

// javascriptcn.com 代码示例
class RemainingTasks extends HTMLElement {
  constructor() {
    super();
    this.remaining = 0;
  }

  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `剩余任务: ${this.remaining}`;
  }

  updateRemaining(newRemaining) {
    this.remaining = newRemaining;
    this.shadowRoot.innerHTML = `剩余任务: ${this.remaining}`;
  }
}

customElements.define('remaining-tasks', RemainingTasks);

这个自定义元素有一个名为 remaining 的属性，可以用来设置和获取当前的剩余任务数。connectedCallback() 方法在元素与文档连接时被调用，它会创建并附加一个影子 DOM（下面会讲到），并在其中显示当前的剩余任务数。updateRemaining() 用于更新 remaining 属性的值并更新文档中显示的剩余任务数。

影子 DOM

影子 DOM 是一种独立于主文档的 DOM 子树。每个自定义元素都可以有一个独立的影子 DOM，它可以包含自定义元素内部的结构和样式，这些内容不会泄漏到主文档DOM或其他自定义元素中。

要在自定义元素中使用影子 DOM，可以调用 this.attachShadow() 方法并传递 { mode: 'open' } 或 { mode: 'closed' } 参数。开启模式将使影子 DOM 可以从外部访问，关闭模式则不行。例如，在上面的例子中，通过 const root = this.attachShadow({ mode: 'open' }); 创建了一个开启模式的影子 DOM，然后在其中添加了标题和任务列表。

HTML 导入 / 导出

HTML 导入 / 导出是一个用于在 HTML 中导入和导出模板的机制。您可以使用 <link rel="import"> 标签将一个 HTML 文件导入到另一个 HTML 文件中，然后在导入的文件中使用 <template> 标签来定义模板，这个模板可以在导入文件的父级文件中使用。

例如，如果您有一个导出模板的 HTML 文件 template.html，其中定义了一个名为 template-id 的模板，您可以使用下面的示例代码将其导入到另一个 HTML 文件中：

<html>
  <head>
    <link rel="import" href="template.html">
  </head>
  <body>
    <template is="template-id"></template>
  </body>
</html>

这里的 <template> 标签使用了 is 属性来指定要使用的模板。该属性的值应该是导出模板的 ID，即在 template.html 中定义的模板标签的 ID。

总结

Web Components 是一项有用的技术，它使开发者可以创建可复用的组件并将其用于跨框架、跨库和跨浏览器的应用程序。它由三个关键技术组成：自定义元素、影子 DOM 和 HTML 导入 / 导出。自定义元素允许开发者创建新的 DOM 元素类型，影子 DOM 允许开发者创建独立的 DOM 子树并封装样式和结构，而 HTML 导入 / 导出则为开发者提供了一种导入和导出模板的方式。虽然 Web Components 在现代浏览器中得到了广泛支持，但在开发过程中仍应考虑向后兼容性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65360e427d4982a6ebde3d28