let:isLeftHovered declared on parent component cannot be used inside named slot

[flyingduck92]

The current version of Svelte not allowed to grab value on parent and used it on named slot, It should be used on the same slot (default/named)

On the tutorial: Button.svelte

  {#if $$slots.leftContent}
    <div
      class="left-content"
      on:mouseenter={() => (isLeftHovered = true)}
      on:mouseleave={() => (isLeftHovered = false)}
      role="none"
    >
      <slot name="leftContent" />
    </div>
  {/if}
  <slot {isLeftHovered}>Fallback Button</slot>

App,svelte

<Button let:isLeftHovered size="small" shadow>
  <div style:width="20px" slot="leftContent">
    {#if isLeftHovered}
      <FaAngellist />
    {:else}
      <FaAngry />
    {/if}
  </div>
  Button Text
</Button>

Should be Button.svelte

{#if $$slots.leftContent}
    <div
      class="left-content"
      on:mouseenter={() => (isLeftHovered = true)}
      on:mouseleave={() => (isLeftHovered = false)}
      role="none"
    >
      <slot name="leftContent" {isLeftHovered} />
    </div>
  {/if}
  <slot>Fallback Button</slot>

App,svelte

<Button size="small" shadow>
  <div let:isLeftHovered style:width="20px" slot="leftContent">
    {#if isLeftHovered}
      <FaAngellist />
    {:else}
      <FaAngry />
    {/if}
  </div>
  Button Text
</Button>

[Jan-Eckerlein]

Please address this dear Svelte Team ;)

[naldiocj]

The solution is: remove let:isLeftHovered in the Button and add to div child

<Button size="small" shadow>
 <div 
  style:width="20px" 
  slot="leftContent" 
  let:isLeftHovered
  >
  {#if isLeftHovered}
    <FaAngellist />
  {:else}
    <FaAllergies />
  {/if}
 </div>
 Button Text
</Button>