pattern

Client-only lazy mount

Need a chunk that only downloads after a click? Keep a small host island, then await import('./Comp.svelte') with no region attributes. What you get is a regular component in that island’s tree — not a second island.

import(mod, { with: { hydrate: 'load' }}) is a build error: Vite strips those attributes, runtimes reject unknown keys, and there is no SSR shell to hydrate anyway. Islands stay on static import X from '…' with { hydrate }.

Plain dynamic import inside an island is normal Svelte: Vite code-splits the module; after the promise resolves you render <Comp />. No ogygia region, no custom element for the lazy piece — just client JS.

client-only lazy mount

Host is an island. Click loads a regular component with await import(…) — no with { hydrate }, no SSR shell for the lazy piece.

Authoring

<!-- +page.svelte — host is the island -->
<script>
  import Host from '$lib/Host.svelte' with { hydrate: 'load' };
</script>
<Host />

<!-- Host.svelte — inside the island -->
<script>
  import type { Component } from 'svelte';
  let Lazy = $state();

  async function load() {
    // plain component — NOT an island (no with { hydrate })
    Lazy = (await import('./Widget.svelte')).default;
  }
</script>

<button type="button" onclick={load}>Load</button>
{#if Lazy}
  {@const Comp = Lazy}
  <Comp />
{/if}