LWCにおけるSlotの利用について

Slotとは

slotは、親コンポーネントから子コンポーネントにマークアップを渡すための方法です。slotタグを子コンポーネントのHTMLファイルで宣言することで、親コンポーネントから渡されたコンテンツを表示することできます。

サンプル

<!-- 親コンポーネント -->
<template>
  <c-child-component>
    <p slot="content">Hello, World!</p>
  </c-child-component>
</template>

<!-- 子コンポーネント(childComponent) -->
<template>
  <div>
    <slot name="content"></slot>
  </div>
</template>

この例では、親コンポーネントでc-child-componentを呼び出し、子コンポーネントのテンプレート内にあるスロットタグのname属性に”content”を指定しています。

その後、親コンポーネント内でタグを定義し、slot属性に”content”を指定しています。これにより、子コンポーネントには親コンポーネントから渡された”Hello, World!”が表示されます。

Slotを利用することのメリット

スロットを利用することで、子コンポーネントのHTMLテンプレート内に動的なコンテンツを表示することができます。また、複数のスロットを利用することもでき、それぞれに異なるname属性を指定することができます。スロットを利用することで、コンポーネントの再利用性を高めることができます。

以上、SalesforceのLWCでのSlotの利用方法についてご紹介いたしました。ご参考になれば幸いです。

参考

<slot>: ウェブコンポーネントのスロット要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/slot

スロットにマークアップを渡す
https://developer.salesforce.com/docs/component-library/documentation/ja-jp/lwc/lwc.create_components_slots