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

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

Continue reading