Slots information disappear, when using {#if} inside parent componet

[borgius]

Describe the bug

If we put named slot in {#if} block on parent component, child will not receive the named slot, but only default slot.
Please check NavBar.svelte $$slots
Example:

App.svelte

<Header title="Hello World!" left="Left" right="right"/>

Header.svelte

<script>
  import NavBar from './NavBar.svelte';
  import Btn from './Btn.svelte';

  export let left;
  export let right;
  export let title;
</script>

<div>
  <NavBar {title}>
    {#if left}
      <Btn slot="left" text="{left}" />
    {/if}
    {#if right}
      <Btn slot="right" text="{right}" />
    {/if}
  </NavBar>
</div>

NavBar.svelte

<script>
  export let title;
</script>

{JSON.stringify($$slots)} <!-- {"default":true} -->

{#if $$slots.left}
  [Left slot]<slot name="left"/>
{/if}

{#if title}
  <h1>{title}</h1>
{/if}

{#if $$slots.right}
  [Right slot]<slot name="right"/>
{/if}

Btn.svelte

<script>
  export let text
</script>

[{text}]

Reproduction

https://svelte.dev/repl/c0de4395f6ad4f7c9093a660225e7110?version=3.48.0

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 196.32 MB / 16.00 GB
    Shell: 5.1.12 - /usr/local/bin/bash
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - ~/.local/bin/yarn
    npm: 6.14.16 - ~/.local/bin/npm
  Browsers:
    Brave Browser: 102.1.39.122
    Chrome: 104.0.5112.29
    Edge: 101.0.1210.53
    Firefox: 101.0
    Safari: 15.5
  npmPackages:
    svelte: ^3.48.0 => 3.48.0

Severity

annoyance

[tanhauhau]

Currently you can't dynamically pass in elements with slot attribute,

so, all of the

{#if left}
  <Btn slot="left" text="{left}" />
{/if} {#if right}
  <Btn slot="right" text="{right}" />
{/if}

in your example is considered as passed into the default

so, a workaround for this would be

{#if left && !right}
  <NavBar {title}>
    <Btn slot="left" text="{left}" />
  </NavBar>
{:else if !left && right}
  <NavBar {title}>
    <Btn slot="right" text="{right}" />
  </NavBar>
{:else if left && right}
  <NavBar {title}>
    <Btn slot="left" text="{left}" />
    <Btn slot="right" text="{right}" />
  </NavBar>
{:else if !left && !right}
  <NavBar {title} />
{/if}

[borgius]

Thank you for explanation and workaround, but workaround looks complicated, and will be more complicated with more props...
So, may be we can convert it to feature request?
That behavior looks logical and will be really useful for multiple scenarios. Thank you!

[dummdidumm]

Closing as won't fix since slots are deprecated in Svelte 5