知っておくと便利!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を使った方が汎用性の高いコンポーネントを開発することができます。