知っておくと便利！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> </lig