“HowTo: Components”是一系列实现常见界面模式的 Web 组件。这些实现旨在作为教育资源。 您可以通读不同组件的密集注释实现，并从中学习。请注意，它们明确不是界面库，不应在生产环境中使用。
组件
<howto-checkbox>：表示表单中的布尔值选项。最常见的复选框类型是双态复选框，用户可以在两种状态（选中和未选中）之间切换。<howto-tabs>：通过将可见内容分隔到多个面板中来限制可见内容。<howto-tooltip>：当元素获得键盘焦点或鼠标悬停在元素上时，显示与元素相关的信息的弹出式窗口。
目标
我们的目标是展示编写强大组件的最佳实践，这些组件应具备无障碍性、高性能、可维护性以及易于设置样式的特点。每个组件都是完全独立的，因此可以作为参考实现。
无障碍
这些组件严格遵循 WAI ARIA 编写实践，该指南旨在解释和展示 ARIA（无障碍富互联网应用标准）。如果您不熟悉 ARIA，请查看我们在 WebFundamentals 上的介绍。 每个组件都链接到《编写实践》的相关部分。虽然并非绝对必要，但我们建议您在深入研究代码之前，先阅读“编写实践”部分。
性能
在 Web 开发中，“性能”一词可以应用于许多方面。在 <howto> 的上下文中，性能主要指动画始终以 60fps 的速度运行，即使在移动设备上也是如此。
视觉灵活性
除了布局或指示所选状态或活动状态之外，组件尽可能不设置样式。这是为了让实现保持视觉上的灵活性和专注性。通过不花时间进行修饰，我们将代码限制为仅包含使组件正常运行所绝对必需的代码。如果组件需要任何样式才能正常运行，该样式将带有注释，说明原因。
可维护的代码
由于 HowTo: Components 是一个参考实现，因此我们花了额外的时间来编写可读且易于理解的代码，并添加了大量注释。
非目标
是一个库/框架/工具包
<howto> 组件未在 npm、bower 或任何其他平台上发布，因为它们不适合在生产环境中使用。为了使代码简洁易读，我们使用了现代 JavaScript API，并支持实现 Web 组件标准的现代浏览器。阅读这些实现后，您将能够根据自己的需求调整代码。
向后兼容
不应直接依赖该代码。如果发现更好的实现方式，我们可能会（而且很可能会）大幅更改任何元素的实现和 API。这是一个动态资源，我们可以在其中分享、探索和讨论构建 Web 界面的最佳实践。
提供完整信息
我们不会（也可能不会）实现 WAI ARIA 编写实践中可以找到的所有组件。不过，通过重复使用其他 <howto> 组件中使用的原则，读者应该能够实现任何缺失的组件。