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