其他类型的 UI 组件¶
除了新的可复用 UI 组件之外，还有一些现有的元素可以起到类似的作用。这些较旧的元素分为两组：Mozilla 自定义元素和用户代理 (UA) 组件。此外，我们还有特定领域组件，它们类似于可复用组件，但创建是为了满足特定需求，并且可能符合也可能不符合设计系统规范。
toolkit/widgets 中较旧的自定义元素¶
在toolkit/content/widgets/中存在一些现有的 UI 组件，它们属于以下两组之一：Mozilla 自定义元素或用户代理 (UA) 组件。这些现有的自定义元素会自动加载到所有特权主进程文档中。您可以通过查看数组或查看toolkit/content/widgets 中的文件来确定某个自定义元素是否属于现有的 UI 组件类别。此外，这些较旧的自定义元素混合了 XUL 和 HTML 元素。
Mozilla 自定义元素¶
与较新的可复用 UI 组件不同，较旧的 Mozilla 自定义元素没有专用的目录。例如arrowscrollbox.js是一个较旧的单个文件自定义元素，而moz-button-group/moz-button-group.mjs则体现了较新的自定义元素遵循的结构。
用户代理 (UA) 组件¶
用户代理 (UA) 组件类似于自定义元素，但它们在每个来源的 UA 组件作用域中运行，而不是 chrome 或内容作用域。与 Mozilla 自定义元素相比，这些组件的数量要少得多。
有关更多详细信息，请参阅现有的UA 组件文档。
如何使用现有的 Mozilla 自定义元素¶
现有的 Mozilla 自定义元素要么自动导入到所有 chrome 特权文档中，要么延迟加载并在首次使用时自动导入。无论哪种情况，这些现有元素都不需要通过<script>标签单独导入。只要您在 chrome 特权文档中工作，就可以访问现有的 Mozilla 自定义元素。您可以使用document.createDocument("customElement)或document.createXULElement("customElement")在相关的 JS 文件中动态创建现有的自定义元素之一，或者在相关的 XHTML 文档中使用自定义元素标签。例如，document.createXULElement("checkbox")创建widgets/checkbox.js的一个实例，而使用<checkbox>在 XUL 文档中声明一个实例。您可以在 about:preferences 中看到复选框组件的使用情况。
如何使用现有的 UA 组件¶
有关如何使用这些组件的更多详细信息，请参阅现有的 UA 组件文档。
这些组件在 chrome 中和内容中的行为¶
UA 组件旨在用于 Web 内容，它们可能在内容中或 chrome 中工作，也可能不工作。但是，由于这些组件在特定的 UA 组件作用域中运行，因此在内容进程中无法访问它们的 DOM。
现有的 Mozilla 自定义元素只能在特权内容进程或 chrome 中使用。由于这些元素不能在常规 Web 内容中使用，因此它们在 chrome 中和内容中的行为没有区别。
特定领域组件¶
并非所有可复用组件都应该在整个 Firefox 中使用。虽然我们确实有一些全局 UI 模式和组件，例如按钮和模态框，但也有一些浏览器内的特定功能包含其自身独特的可复用模式。这些模式和组件称为“特定领域组件”。例如，login-timeline 组件就是一个特定领域组件。
添加新的特定领域组件¶
虽然我们确实有./mach addwidget命令，如添加新的设计系统组件文档中所述，但此命令目前不支持特定领域组件的情况。有关支持此情况的更多详细信息，请参阅 Bug 1828181。相反，您需要使用./mach addstory your-widget "your-project-or-team-name"在browser/components/storybook/stories中创建一个新的故事。您还可以使用./mach addstory your-widget "your-project-or-team-name" --path <your-widget-path>/<widget-source>，以便正确导入组件的源代码。
如果您指定了路径并正在运行 Storybook，则组件的空白故事条目将显示在特定领域 UI 组件/您的项目部分下。否则，如果您没有添加路径，Storybook 将抛出一个错误，指出它在新添加的故事中“无法解析 'None'”。这是预期的，并提醒您需要使用组件源代码导入更新新创建的故事。
由于 Storybook 不知道实际代码是如何添加或构建的，因此我们不会详细介绍如何将您的新组件添加到代码库中。建议为您的新组件创建一个.html测试，因为这使您可以直接对组件进行单元测试，而不是使用域的集成测试。要查看组件可能需要的文件类型，请参阅./mach addwidget命令的输出。与 UI 组件一样，browser_all_files_referenced.js将失败，除非您在 Storybook 之外立即使用您的组件。
使用新的特定领域组件¶
这与使用新的设计系统组件实际上相同。通常，您可以依赖这些元素在首次使用时延迟加载，这类似于现有自定义元素的导入方式。
在 chrome 特权文档之外，您可能需要通过带有type="module"的script标签将您的组件导入相关的html/xhtml文件中。
<script type="module" src="chrome://browser/content/<domain-directory>/<your-widget>.mjs"></script>