Part 3 / Component composition / Checking for slot content

この練習問題の画像の部分が現時点では動作しません。代わりに、既存のチュートリアルをお試しください: https://svelte.jp/tutorial/optional-slots

場合によっては、親が特定のスロットのコンテンツを渡すかどうかに基づいてコンポーネントの一部を制御したいことがあるかもしれません。おそらく、そのスロットの周りにラッパーを持っていて、スロットが空の場合はレンダリングしたくないでしょう。あるいは、スロットが存在する場合にのみクラスを適用したいと考えているかもしれません。これは、特別な変数 $$slots のプロパティをチェックすることで実現できます。

$$slots は親コンポーネントから渡されたスロットの名前がキーとなるオブジェクトです。親コンポーネントがスロットを空にした場合、 $$slots はそのスロットのエントリを持ちません。

この例の <Project> のインスタンスは、片方だけにしかコメントがないにも関わらず、両方ともコメント用のコンテナと通知用のドットをレンダリングしていることに注目してください。親の <App> が comments スロットにコンテンツを渡した場合にのみ、これらの要素をレンダリングするように $$slots を使用したいと思います。

Project.svelteにおいて、<article>の class:has-discussion ディレクティブを更新してください。

<article class:has-discussion={$$slots.comments}>

次に、comments スロットとそれを囲んでいる <div> を $$slots をチェックする if ブロックで囲みます。

{#if $$slots.comments}
	<div class="discussion">
		<h3>Comments</h3>
		<slot name="comments"></slot>
	</div>
{/if}

これで、<App> の comments スロットが空の時は、コメントコンテナと通知ドットがレンダリングされなくなりました。