Hydration breaks with conditional browser rendering and slot fallback

[plmrry]

Describe the bug

I'm running into a pretty mysterious bug involving the use browser to conditionally render and (in a separate component!) a slot with fallback content.

Here's my setup:

An array is used to render one of two components:
routes/index.svelte:

<script>
  import BreakHydration from '$lib/BreakHydration.svelte';
  import Text from '$lib/Text.svelte';

  const blocks = [
    { type: `text`, text: `text one` },
    { type: `breakhydration`, text: `this breaks hydration` },
    { type: `text`, text: `text two` },
    { type: `text`, text: `text three` }
  ];
</script>

{#each blocks as { type, text }, index (index)}
  <div>index: {index}</div>
  <div>should be: {text}</div>
  {#if type === `breakhydration`}
    <BreakHydration {text} />
  {:else}
    <Text {text} />
  {/if}
  <div style:height="2rem" />
{/each}

Text.svelte uses a slot with fallback content:

<script>
  export let text;
</script>

<p style:border="1px dashed black">
  <slot>
    {@html text}
  </slot>
</p>

BreakHydration.svelte renders different things depending on browser:

<script>
  import { browser } from '$app/env';
  export let text;
</script>

{#if browser}
  <div style:border="1px dashed black">{text}</div>
{:else}
  <ul>
    <li>{text}</li>
  </ul>
{/if}

And the result:

Reproduction

StackBlitz

Logs

No response

System Info

StackBlitz

Severity

serious, but I can work around it

Additional Information

No response

[plmrry]

I've created another reproduction of this bug without using SvelteKit