1. Web
  2. Web API
  3. Web Components

Web Components

Web Components 是一套不同的技术，它允许您创建可重用的自定义元素——这些元素的功��与您代码的其余部分隔离开来——并在您的 Web 应用中使用它们。

概念与用法

作为开发者，我们都知道尽可能重用代码是一个好主意。传统上，这对于自定义标记结构来说并不容易——想想看您有时不得不编写的复杂的 HTML（以及相关的样式和脚本）来渲染自定义 UI 控件，以及如果您不注意，多次使用它们可能会让您的页面变得一团糟。

Web Components 旨在解决此类问题——它包含三个主要技术，可以组合使用来创建具有封装功能的通用自定义元素，您可以随意在任何地方重用它们，而不必担心代码冲突。

自定义元素

一组 JavaScript API，允许您定义自定义元素及其行为，然后可以在您的用户界面中按需使用它们。

Shadow DOM

一组 JavaScript API，用于将一个封装的“影子” DOM 树附加到一个元素上——它与主文档 DOM 分开渲染——并控制相关的功能。通过这种方式，您可以将元素的特性保持私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。

HTML 模板

<template> 和 <slot> 元素使您可以编写在渲染页面中不显示的标记模板。这些模板随后可以多次用作自定义元素结构的基��进行重用。

实现 Web Component 的基本方法通常如下所示

  1. 创建一个类，在其中使用 `class` 语法指定 Web Component 的功能。
  2. 使用 `CustomElementRegistry.define()` 方法注册您的新自定义元素，向其传递要定义的元素名称、指定其功能的类或函数，以及可选的它继承自哪个元素。
  3. 如果需要，使用 `Element.attachShadow()` 方法将 Shadow DOM 附加到自定义元素上。使用常规的 DOM 方法将子元素、事件监听器等添加到 Shadow DOM 中。
  4. 如果需要，使用 `