建材

コンポーネントは、最新のウェブ アプリケーションの構成要素です。独自のコンポーネントを構築する際に、時間の経過に耐えられるようにするために従うべきベスト プラクティスは何ですか。 コンポーネントは、最新のウェブ アプリケーションの構成要素です。独自のコンポーネントを構築する際に、時間の経過に耐えられるようにするには、どのようなベスト プラクティスに従うべきでしょうか。

コードのアイコン。

カスタム要素

カスタム要素を使用すると、デベロッパーは HTML を拡張して独自のタグを作成できます。カスタム要素は標準に基づいているため、ウェブの組み込みコンポーネント モデルのメリットを享受できます。その結果、さまざまなコンテキストで再利用できる、よりモジュール化されたコードになります。 詳細
枠線のスタイル アイコン

シャドウ DOM

Shadow DOM は、コンポーネント スタイルとマークアップのカプセル化を提供するウェブ標準です。これは、ウェブ コンポーネントのストーリーにおいて非常に重要な部分です。なぜなら、ページ上で他の CSS や JavaScript が動作していても、コンポーネントがどのような環境でも動作することを保証するからです。 詳細
完了アイコン。

ベスト プラクティス

カスタム要素とシャドウ DOM は低レベルのプリミティブであるため、これらをどのように組み合わせれば、さまざまな環境で適切に動作する堅牢なコンポーネントを作成できるのかが明確でない場合があります。これらの API を使用すれば、ほぼ何でも実現できますが、コンポーネントがどこでも適切に動作するようにするためのベスト プラクティスをいくつか紹介します。 詳細
[Explore] アイコン。

例

HowTo-Components は、カスタム要素と Shadow DOM のベスト プラクティスを示す一連の要素です。これらの要素は、本番環境での使用を目的としたものではなく、ベスト プラクティスの提案を実際の実装にマッピングするのに役立つ教育用補助として提供されています。 詳細