$$slotsによるスロットコンテンツの確認

スロットにコンテンツがある場合にだけ、枠線やヘッダーなどのラッパー用マークアップを表示したいことがあります。

コンポーネント内では、$$slots は埋められた各スロットに対応するプロパティを持つオブジェクトです。

スロットにコンテンツがある場合、$$slots 内のそのキーは truthy になります。

スロットが空の場合はラッパー用マークアップの描画を省略し、DOM をすっきり保ちます。

フォールバックコンテンツを表示するか、ラッパー全体を省略するかを選択できます。

再レンダリングの間にスロットの内容が変わると、$$slots もリアクティブに更新されます。

各名前付きスロットを個別にチェックしてください。

タイトルやフッターが任意のカードでは、このパターンがよく使われます。

デフォルトスロットは $$slots.default の下に現れます。

TypeScript では $$Slots 型を宣言すると、$$slots のオートコンプリートを利用できます。

マークアップに分岐が追加されますが、よりクリーンな出力になります。デザインシステムでは、その価値があります。

$$slots.name を使って親コンポーネントがスロットを埋めたかどうかを検出し、埋めていない場合はラッパー用マークアップを省略します。