--- title: Slot props --- In this app, we have a `` component that tracks whether the mouse is currently over it. It needs to pass that data *back* to the parent component, so that we can update the slotted contents. For this, we use *slot props*. In `Hoverable.svelte`, pass the `hovering` value into the slot: ```html
``` > Remember you can also use the `{hovering}` shorthand, if you prefer. Then, to expose `hovering` to the contents of the `` component, we use the `let` directive: ```html
{#if hovering}

I am being hovered upon.

{:else}

Hover over me!

{/if}
``` You can rename the variable, if you want — let's call it `active` in the parent component: ```html
{#if active}

I am being hovered upon.

{:else}

Hover over me!

{/if}
``` You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared. > Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.