In this app, we have a `<Hoverable>` 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
<divon:mouseenter={enter}on:mouseleave={leave}>
<slothovering={hovering}></slot>
</div>
```
> Remember you can also use the `{hovering}` shorthand, if you prefer.
Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
```html
<Hoverablelet:hovering={hovering}>
<divclass:active={hovering}>
{#if hovering}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
</Hoverable>
```
You can rename the variable, if you want — let's call it `active` in the parent component: