Webコンポーネント用のHTML「スロット」要素

スロットは、Webコンポーネントにカスタムコンテンツを挿入するために使用されるプレースホルダーです。 1.デフォルトのスロットは、<slot>タグから単一のコンテンツ挿入を実装します。 2。名前付きスロットは、名前属性を使用して、複数のスロット位置を区別して構造の明確さを改善します。 3.スロットコンテンツは、親の範囲内で解析されます。このスタイルは、デフォルトではスロットコンテンツに影響しませんが、:: slotted（）によって制御できます。 4.コンポーネント内の複数のスロットを設定して、コンポーネントの柔軟性を高めることができます。

HTML slot要素を使用すると、Webコンポーネントにカスタムコンテンツを挿入するのが非常に便利です。これは「プレースホルダー」のようなもので、開発者はコンポーネント内の指定された場所に外部からコンテンツを配置できます。

スロットとは何ですか？

簡単に言えば、 <slot></slot>は、コンテンツをカスタム要素に挿入するためのWebコンポーネントテクノロジーの一部です。 ReactまたはVueのスロット関数について書いた場合は、この概念に精通している必要があります。ネイティブ<slot></slot>タグは、同様の機能を実装するための基礎です。

たとえば、 <my-card></my-card>というコンポーネントを作成し、それを使用するときは、テキストまたは他の要素の段落を入れたいと思います。

 <マイカード>
  <p>これはカードのコンテンツです</p>
</my-card>

この時点で、 <my-card>に<slot>がない場合、これらの内容は表示されません。 <slot>を追加した後、ブラウザはこのコンテンツをどこに配置するかを知っています。

デフォルトのスロットを使用する方法は？

それを使用する最も簡単な方法は、コンポーネントテンプレートに<slot>タグを配置することです。

 <テンプレートid = "card-template">
  <style>
    .card {
      ボーダー：1pxソリッド#ccc;
      パディング：10px;
    }
  </style>
  <div class = "card">
    <slot> </slot>
  </div>
</テンプレート>

このように、 <my-card>タグの間に配置されたすべてのコンテンツは、 <slot>位置に挿入されます。

• コンテンツがない場合、スロットは空です。
• 複数のノードがある場合、それらは一緒に挿入されます。

この方法は、「デフォルトスロット」とも呼ばれる1つのスロットのみが必要な状況に適しています。

構造をより明確にするために、スロットという名前が付けられました

複数の異なるコンテンツ領域をコンポーネントに挿入する場合は、名前付きスロットを使用できます。たとえば、カードにはタイトル、ボディ、および底部の操作エリアがあります。

HTMLのname属性は、異なるスロットを区別できます。

 <テンプレートid = "card-template">
  <div class = "card">
    <header> <スロット名= "header"> </slot> </header>
    <main> <slot> </slot> </main>
    <Footer> <スロット名= "Footer"> </slot> </footer>
  </div>
</テンプレート>

次に、コンポーネントを使用するときは、これを書きます。

 <マイカード>
  <h1 slot = "header">私はタイトル</h1>です
  <p>これが主なコンテンツです</p>
  <ボタンスロット= "フッター">詳細を表示</button>
</my-card>

これにより、各部分を対応する位置に正確に挿入できます。特にレイアウトコンポーネントまたは再利用可能なUIモジュールに適しています。

いくつかの一般的な予防策

• スロットコンテンツの範囲：スロット内のコンテンツは、コンポーネントの内部ではなく、親スコープに解析されます。
• スタイルコントロール：コンポーネント内のスタイルは::slotted() pseudoクラスが使用されない限り、スロットのコンテンツに影響しません。
• 代替コンテンツ：スロットタグの中央にデフォルトコンテンツを記述できます。また、ユーザーがコンテンツを渡さない場合に表示されます。

例えば：

 <slot>デフォルトコンテンツ</slot>

• 複数のスロットでネストされている：コンポーネントには複数のスロットがある可能性がありますが、深く巣を作ることは避けてください。そうしないと、維持するのは面倒です。

基本的にそれだけです。 slotを使用すると、Webコンポーネントがより柔軟で強力になります。シンプルに見えますが、再利用可能なコンポーネントを構築するときに特に便利です。

以上がWebコンポーネント用のHTML「スロット」要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。