スロットにマークアップを渡す

親コンポーネントがコンポーネントにマークアップを渡すことができるようにコンポーネントの HTML ファイルにスロットを追加します。コンポーネントは 0 個以上のスロットを持つことができます。

スロット (<slot></slot>) は、親コンポーネントがコンポーネントの本体に渡すマークアップのプレースホルダです。

この例には、名前なしスロットがあります。名前なしスロットは、親コンポーネントが c-slot-demo の本体に渡すマークアップのプレースホルダとして <slot> 要素を使用します。

c-slot-demo を使用する親コンポーネントのマークアップを次に示します。

c-slot-demo が表示されるとき、名前なしスロットは、c-slot-demo の本体に渡されるマークアップに置き換えられます。表示される c-slot-wrapper の出力を次に示します。

コンポーネントに名前なしスロットが複数ある場合、その本体に渡されたマークアップは、すべての名前なしスロットに挿入されます。ただし、コンポーネントの名前なしスロットの数は、通常は 0 個または 1 個です。

次の例のコンポーネントには、2 つの名前付きスロットと 1 つの名前なしスロットがあります。

HTML 要素の slot 属性には動的値を設定できます。以下では、<span> 要素の slot 属性が変数 dynamicName に設定されています。

slot 属性に渡される動的値は、文字列に設定されます。たとえば、この属性に数値の 4 を渡すと、文字列の "4" に変換されます。文字列に変換できない Symbol() などのデータ型を渡した場合は、TypeError がスローされます。

この変更は、<slot> 要素の属性には影響しません。たとえば、<slot> 要素の name 属性には、引き続き静的文字列を渡す必要があります。

c-named-slots を使用する親コンポーネントのマークアップを次に示します。

c-slots-wrapper コンポーネントは、次のような受け渡しを行います。

• Willy を firstName スロットに渡します。
• Wonka を lastName スロットに渡します。
• Chocolatier を名前なしスロットに渡します。

表示される出力を次に示します。

<slot></slot> 要素は、コンポーネントのシャドウツリーの一部です。そのシャドウツリーの要素にアクセスするには、コンポーネントで this.template.querySelector() と this.template.querySelectorAll() をコールします。

ただし、スロットに渡される DOM 要素は、コンポーネントのシャドウツリーの一部ではありません。スロット経由で渡される要素にアクセスするには、コンポーネントで this.querySelector() と this.querySelectorAll() をコールします。

次の例は、DOM 要素を子のコンテキストの子コンポーネントに渡す方法を示しています。this.querySelector() と this.querySelectorAll() のセレクタ名 (要素など) を指定します。

この例の場合、querySelector は、要素 span を受け入れます。

スロットを条件に応じてレンダリングするには、lwc:if、lwc:else、lwc:elseif などのディレクティブを使用してスロットを <template> タグ内にネストします。

テンプレートコンパイラは、条件ディレクティブのそれぞれを有効な使用事例の 1 つとして処理し、<slot> を 2 回表示しないものと認識します。

従来の if:true および if:false ディレクティブを使用した場合は、<slot> を一度だけ表示するかどうかが不明なため、コンパイラが重複スロットについて警告します。たとえば、expression getter は毎回異なる戻り値を持つことができます。

すべての <slot> 要素では、slotchange イベントがサポートされます。<slot> 要素内のノードの直接の子が変更されると、slotchange イベントが起動されます。たとえば、これは新しいコンテンツが追加または削除されたときに発生します。このイベントがサポートされるのは、<slot> 要素のみです。

<slot> 要素の子の内部の変更では、slotchange イベントはトリガされません。

次の例では、<slot> 要素が slotchange イベントを処理します。

コンポーネント c-child は、スロットに渡されます。

フラグ addOneMore が True に設定されている場合、コンポーネントが初めて表示されるときにコンソールに出力が表示されます。

showFooter が true で、フッター要素が追加された場合でも、slotchange イベントはトリガされません。

関連トピック

• Shadow DOM
• イベントの処理
• スロットとデータを使用したコンポーネントの構成方法の比較
• MDN Web docs: <slot>