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