Issue involves complex Astro+Svelte interaction with hydration and SSR.
The issue describes nested Svelte components losing styles when enclosed in {#if} blocks in an Astro+Svelte setup with hydration enabled. The problem appears to be specific to Astro's handling of Svelte components and SSR, making it difficult to isolate and reproduce in a pure Svelte context. The issue seems to have been addressed in Astro, reducing its urgency.
This bug is present with Astro+Svelte combination, and unfortunately, I don't know if this can be reproduced with Svelte only.
This issue on Astro repo: https://github.com/withastro/astro/issues/14252 The bug appeared in Svelte 5.26.0 and further on, 5.25.12 is unaffected.
Conditions: Astro v5.13.2, Svelte 5.38.2 Astro component must include Svelte component with hydration enabled (this means both SSR and normal compilation):
page.astro:
--
import Component1 from "./Component1.svelte";
--
<Component1 client:idle />
Component1.svelte:
<script>
import NestedComponent from "NestedComponent.svelte";
</script>
{#if true}
<NestedComponent /> <!-- This one loses all styles! -->
{/if}
https://stackblitz.com/github/M4R7iNP/astrobugtest?file=README.md
System:
OS: Windows 11 10.0.26100
CPU: (12) x64 AMD Ryzen 5 5600H with Radeon Graphics
Memory: 36.42 GB / 63.86 GB
Binaries:
Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
npm: 11.6.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (140.0.3485.81)
Internet Explorer: 11.0.26100.1882
annoyance
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!