hovering 상태값 App.svelte에 전달시 오류

App.svelte

<script>

import Card from './card.svelte';

</script>

<Card>

<span slot="name">

홍길동

</span>

<span slot="address">

서울특별시<br>여의도동

</span>

<span slot="email">

ab@abc.com

</span>

</Card>

<Card let:hovering>

<span slot="email">

{#if hovering}

<b>ab@abc.com</b>

{:else}

ab@abc.com

{/if}

</span>

</Card>

card.svelte

<style>

.contact-card {

width: 300px;

border: 1px solid #aaa;

border-radius: 2px;

box-shadow: 2px 2px 8px rgba(0,0,0,0.1);

padding: 1em;

margin: 0 0 1em 0;

}

h2{

padding: 0 0 0.2em 0;

margin: 0 0 1em 0;

border-bottom: 1px solid #ff3e00;

}

.address, .email {

padding: 0 0 0 1.5em;

background: 0 50% no-repeat;

background-size: 1em 1em;

margin: 0 0 0.5em 0;

line-height: 1.2;

}

.address { background-image: url(tutorial.icons/map-marker.svg); }

.email { background-image: url(tutorial/icons/email.svg); }

.missing { color: #999; }

.hovering { background-color: #ffed99;}

</style>

<script>

let hovering = false;

const enter = () => hovering = true;

const leave = () => hovering = false;

</script>

<article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}>

<h2>

<slot name="name">

<span class="missing">이름 미입력</span>

</slot>

</h2>

<div class="address">

<slot name="address">

<span class="missing">주소 미입력</span>

</slot>

</div>

{#if $$slots.email}

<div class="email">

<slot {hovering} name="email">

<span class="missing">이메일 미입력</span>

</slot>

</div>

{/if}

</article>

제가 작성한 코드인데 뭔가 잘못된 것인지 오류 메세지로

let:hovering declared on parent component cannot be used inside named slot (App.svelte:21:7)

라고 나옵니다.

강의를 제가 잘못 따라한 것인지 궁금합니다.

<script>

import Card from './card.svelte';

</script>

<Card>

<span slot="name">

홍길동

</span>

<span slot="address">

서울특별시<br>여의도동

</span>

<span slot="email">

ab@abc.com

</span>

</Card>

<Card let:hovering>

<span slot="email" let:hovering>

{#if hovering}

<b>ab@abc.com</b>

{:else}

ab@abc.com

{/if}

</span>

</Card>

이렇게 slot 내부에 다시 hovering을 선언하면 작동은 잘 되는데 맞게 작성한지 잘 몰라서 질문드립니다.

<script>
import Card from './Card.svelte';
</script>

<Card>
...
	<span slot="email" let:hovering > <!-- 이부분에서 let으로 값을 받음 --->
		{#if hovering}
			<b>myemail@google.com</b> 
		{:else}
			myemail@google.com
		{/if}
		<br>
		{hovering}
	</span>
</Card>