Implement Persistent Layouts and Keyed Boundaries
latestIn SvelteKit, a persistent +layout.svelte can own an outer boundary while child pages own inner boundaries. When navigating between child routes, the layout boundary remains stable.
If the router reuses the same DOM node but you need to force a new boundary (e.g., when the path changes but the component doesn't re-mount), wrap the boundary in a Svelte {#key} block using the current pathname.
<!-- Persistent layout boundary -->
<div data-ssgoi-transition={$page.url.pathname}>
<ProductTabs />
{@render children()}
</div>
<!-- Forcing a boundary refresh using a keyed block -->
{#key resolveKey($page.url.pathname)}
<div data-ssgoi-transition={$page.url.pathname}>
{@render children()}
</div>
{/key}