知っておくと便利！Lightning Web Componentsのslotの使い方。

Vue.jsでおなじみのslotが、Lightning Web Componentsでもサポートされています。

使い方をマスターしておくと、コンポーネント開発の幅が広がります。

slotとは何か？

slotとは、自分のコンポーネント内部の一部を外部から変更できる仕組みです。

上図のように親コンポーネントに子コンポーネントを配置していて、子コンポーネントの中でslotを定義していると、その中を親コンポーネントから変更することができます。

slotの使い方

以下のようなlightning-cardを使ってメッセージを表示するコンポーネントChildComponentで説明します。

カードの内容をslotにする場合、以下のように実装します。

<template>
 <lightning-card title="カードタイトル">
   <slot>
     <p>カードの内容</p>
   </slot>
 </lightning-card>
</template>

このコンポーネントを親コンポーネントで使うには、以下のように実装します。

<template>
 <c-child-component>
 </c-child-component>
</template>

では、親コンポーネントからコンポーネントChildComponentを以下のように表示するにはどうしたらいいでしょうか？

コンポーネントChildComponentでは、「カードの内容」の部分がslotとして定義していました。

以下のようにすると、コンポーネントChildComponentのslot部分を置き換えることができます。

<template>
 <c-child-component>
   <!-- ここから -->
   <div>
     <img src="logo.png">
   </div>
   <div>
     <p>これはロゴです</p>
   </div>
   <div>
     <lightning-button variant="brand" label="OK"></lightning-button>
   </div>
   <!-- ここまで -->
 </c-child-component>
</template>

名前付きslot

slotには名前を付けることができます。

<template>
 <lightning-card title="カードタイトル">
   <div>
     <slot name="card-image">
     </slot>
   </div>
   <div>
     <slot name="card-message">
     </slot>
   </div>
   <div>
     <slot name="card-action">
     </slot>
   </div>
 </lightning-card>
</template>

card-image、card-message、card-actionという名前付きslotを定義しています。

これを先ほどと同じように親コンポーネントで使う場合には以下のようになります。

<template>
 <c-child-component>
   <!-- ここから -->
   <img src="logo.png" slot="card-image">
   <p slot="card-message">これはロゴです</p>
   <lightning-button variant="brand" label="OK" slot="card-action"></lightning-button>
   <!-- ここまで -->
 </c-child-component>
</template>

@apiで子コンポーネントに値を渡して表示するという方法もありますが、slotを使った方が汎用性の高いコンポーネントを開発することができます。