I'm glad to get brunnerh's advice. I can now structure the code more rationally. I only need to make a WinBox component containing the layout div with {@render} and introduce the predefined snippet props. Pass {snippet} into the WinBox component on +page.svelte. Maybe I need to go a step further to replace snippet with component and pass it into WinBox with very few changes.

I guess I am closer to svelte5. The following code is what I'm doing.

// WinBox.svelte

<script lang="ts">
    import type { Snippet } from 'svelte';

    let {
        children,
        slotLeft = dummySnippet,
        slotCenter = dummySnippet,
        slotRight = dummySnippet
    }: {
        children?: Snippet;
        slotLeft?: Snippet;
        slotCenter?: Snippet;
        slotRight?: Snippet;
    } = $props();
</script>

{#snippet dummySnippet()}
    <p>Pending</p>
{/snippet}

<winbox class="flex flex-row h-full w-full overflow-hidden">
    <listbox class="w-[400px]">
        {@render slotLeft()}
    </listbox>

    <div class="flex-1 flex flex-col border-x">
        {@render slotCenter()}
    </div>

    <div class="w-[350px]">
        {@render slotRight()}
    </div>
</winbox>

{@render children?.()}

// +page.svelte

<script lang="ts">
    import { WinBox } from '$lib/components/my-ui/win-box';
    import { onMount, getContext, type Snippet } from 'svelte';
    import type { Writable } from 'svelte/store';
</script>

{#snippet slotLeft()}
    <p>Left Menu Pending</p>
{/snippet}

{#snippet slotCenter()}
    <p>Center Content Pending</p>
{/snippet}

{#snippet slotRight()}
    <p>Right Menu Pending</p>
{/snippet}

<WinBox {slotLeft} {slotCenter} {slotRight}>This area is the children prop snippet</WinBox>