この例を実行すると、何もレンダリングされないことに気付くでしょう。ユーザーのマークアップが消えたように見えます。その子の代わりにレンダリングされるためです。要素を配置して、子がレンダリングされる場所をブラウザに通知する必要があります。詳細については後述します。間違いなく最も重要なものです。宣言的にアプリを構築する方法のことです。異なる構成要素(<div>、<header>、<form>、<input>)が集まって、アプリを構成します。これらのタグの中には、連携して動作するものもあります。ネイティブ要素の柔軟性が非常に高い理由は、コンポジションにあります。子として受け入れ、それらに特別な処理を行います。ドロップダウンと複数選択ウィジェットにレンダリングすることができます。展開可能な矢印としてレンダリングします。特定の子を処理することができます。要素はレンダリングされませんが、動画の動作に影響します。コンポジションによって、ウェブ開発にさまざまな新しい基盤が導入されました。詳細を説明する前に、使用する用語を統一しておきましょう。DOMコンポーネントのユーザーが作成するマークアップです。これは要素の実際の子です。定義し、実装の詳細をカプセル化します。コンポーネントの使用者が作成したマークアップをレンダリングする方法を定義することもできます。配置した結果で、これにより最終生成物がレンダリングされます。最終的に表示され、ページにレンダリングされます。スロットはコンポーネント内にあるプレースホルダで、ユーザーはこれに独自のマークアップを入れることができます。内でレンダリングされるように呼び込みます。基本的には、「ユーザーのマックアップをここでレンダリングしてください」と言っているのと同じです。API」を作成する方法です。組み込まれて、コンポーネント全体のレンダリングを助けます。境界を「越える」ことができます。このような要素は分散ノードと呼ばれます。概念上は、分散ノードは少し不思議に思えるかもしれません。内の別の場所でレンダリングします。内でゼロ個以上のスロットを定義できます。コンテンツを提供することもできます。コンテンツをレンダリングします。text</summary></slot>名前付きスロットを作成することもできます。内の特別な穴で、ユーザーはこれを名前で参照します。次のように宣言します。3</section></fancy-tabs>フラット化されるツリーは次のようになります。ツリーは変わらないことに注意してください。変更することもできます。同様に、異なる種類の子を処理するために作成されたものです。コンポーネントのスタイル設定には多数のオプションがあります。プロパティの形式で)提供することもできます。セレクターは、コンポーネント内部には適用されません。内部で定義されたスタイルは外部に影響しません。これらのスコープはホスト要素に設定されています。セレクターは、コンポーネントにローカルで適用されます。名を使用できるということです。これはパフォーマンスの面でも優れています。ツリーにはスタイルシートのスコープも適用されます。要素がどのように(ドロップダウンではなく)複数選択ウィジェットをレンダリングするのか、疑問に思ったことはありませんか。この要素に対して宣言された属性に基づいて、それ自身に異なるスタイルを設定できます。セレクターを使用してそれ自身にスタイルを設定できます。ルールよりも高いことです。外部のスタイルが優先されます。このため、ユーザーは外部から最上位のスタイルをオーバーライドできます。外側で使用することはできません。一致する場合に、ホストをターゲットにすることができます。これは、ホストに基づいてユーザー操作または状態、またはスタイルの内部ノードに反応する動作をコンポーネントがカプセル化するための優れた方法です。一致する場合に、コンポーネントに一致します。これの一般的な使用方法は、コンポーネントの周囲の要素に基づいたテーマの設定です。クラスを適用することで、テーマを設定しています。子孫である場合に、この要素にスタイルを設定します。プロパティを使用してスタイルフックを作成することです。分散されるノードに一致します。コンポーネントを作成したとしましょう。スタイルを設定できます。レンダリングしますが、ノードの実際の位置は変わりません。分散前に適用されていたスタイルは、分散後も引き続き適用されます。より定義されたスタイル)を使用できます。詳細な別の例を以下に示します。つのスロットがあります。ユーザーがタブを選択したら、選択されたタブを太字にし、そのパネルを表示します。属性を持つ分散ノードを選択することによって行われます。JS(ここには示していません)は、その属性を適切な時に追加します。外部からコンポーネントのスタイルを設定するには、いくつかの方法があります。簡単は方法は、タグ名をセレクターとして使用することです。内で定義されたスタイルより優先されます。コンポーネント自体にスタイルを設定しても、コンポーネントにしか適用されません。コンポーネントの内部にスタイルを設定するには、どうすればよいでしょうか。プロパティが必要です。プロパティを使用してスタイルフックを提供している場合、ユーザーは内部スタイルを調整できます。プレースホルダ」を作成するのです。背景の値として使用します。プロパティを教える必要があります。これはコンポーネントの公開インターフェースの一部と考えてください。スタイルフックについても必ずドキュメントに記載してください。別の特長は、「クローズド」モードと呼ばれます。アクセスできなくなります。ネイティブ要素の動作と似ています。モードの影響を受けます。