「HowTo: Components」は、一般的な UI パターンを実装するウェブ コンポーネントのコレクションです。これらの実装の目的は、教育リソースとして機能することです。さまざまなコンポーネントの実装に詳細なコメントが付けられているので、それらを参考にしてください。これらは UI ライブラリではなく、本番環境では使用しないでください。
コンポーネント
<howto-checkbox>: フォーム内のブール値オプションを表します。最も一般的なタイプのチェックボックスは、ユーザーが 2 つの選択肢（オンとオフ）を切り替えることができるデュアルタイプです。<howto-tabs>: 表示されるコンテンツを複数のパネルに分割して制限します。<howto-tooltip>: 要素がキーボード フォーカスを受け取ったとき、またはマウスが要素にホバーしたときに、要素に関連する情報を表示するポップアップ。
目標
このガイドの目的は、アクセスしやすく、パフォーマンスが高く、メンテナンスが容易で、スタイル設定が簡単な堅牢なコンポーネントを作成するためのベスト プラクティスを示すことです。各コンポーネントは完全に自己完結しているため、リファレンス実装として使用できます。
ユーザー補助
コンポーネントは、WAI ARIA Authoring Practices に厳密に準拠しています。これは、Accessible Rich Internet Application 標準である ARIA を説明し、示すためのガイドです。ARIA に精通していない場合は、WebFundamentals の概要をご覧ください。各コンポーネントは、オーサリング プラクティスの関連セクションにリンクしています。厳密には必要ありませんが、コードを記述する前に、作成方法のセクションを読むことをおすすめします。
パフォーマンス
ウェブ開発において、「パフォーマンス」という用語はさまざまなものに適用できます。<howto> のコンテキストでは、パフォーマンスとは主に、モバイル デバイスでもアニメーションが 60 fps で一貫して実行されることを指します。
視覚的な柔軟性
レイアウトや、選択された状態またはアクティブな状態を示す場合を除き、コンポーネントのスタイルは可能な限り設定されません。これは、実装の視覚的な柔軟性と焦点を維持するためです。装飾に時間をかけないことで、コンポーネントを機能させるために絶対に必要なコードのみに制限します。コンポーネントが機能するためにスタイルが必要な場合は、その理由を説明するコメントがスタイルに付けられます。
メンテナンスしやすいコード
HowTo: Components はリファレンス実装であるため、読みやすく理解しやすいコードを記述し、詳細なコメントを付けることに時間をかけました。
目標外
ライブラリ、フレームワーク、ツールキットである
<howto> コンポーネントは、本番環境での使用を想定していないため、npm、bower、その他のプラットフォームでは公開されていません。簡潔で読みやすいコードにするために、最新の JavaScript API を使用し、Web Components 標準を実装する最新のブラウザをサポートしています。これらの実装を読んだ後、独自のニーズに合わせてコードを適応させることができます。
下位互換性がある
このコードに直接依存しないでください。より優れた実装が見つかった場合、要素の実装と API が大幅に変更される可能性があります。これは、ウェブ UI を構築するためのベスト プラクティスを共有、探索、議論できる、生きたリソースです。
完全であること
WAI ARIA Authoring Practices に記載されているすべてのコンポーネントを実装しているわけではありません（今後も実装する予定はありません）。ただし、他の <howto> コンポーネントで使用されている原則を再利用することで、読者は不足しているコンポーネントを実装できます。