自作コンポーネントの入れ子

自作コンポーネントも、実は子を持つことができます。とりあえず、例を見てみましょう。src/lib/components/Parent.svelteを作成し、中身を以下のようにしてください。

<script lang="ts">
    let {children} = $props();
</script>

<h1>これは親コンポーネントです、下に子が表示されます。</h1>
{@render children()}

できたら、src/routes/+page.svelteなどのファイルでimport Parent from "$lib/components/Parent.svelte"をし、以下のように使ってみてください。

<Parent>
    <h2>これは子です</h2>
</Parent>

Parentコンポーネントの中身も表示されたと思います。このように、コンポーネントの子要素は、$props()でchildrenというプロパティで与えられ、HTMLの部分で{@render children()}と書くと表示することができます。

Parentと同じ要領で、src/routes以下の好きな場所に+layout.svelteを置けば、置いた場所か、それよりも深い階層にあるページは、すべて+layout.svelteの子コンポーネントのように表示されます。実際に、デフォルトのsrc/routes/+layout.svelteは、以下のような内容になっていると思います。

<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

{@render children()}