use render props

Author: dummdidumm

src/lib/components/Modal.svelte

@@ -1,8 +1,8 @@
 <script>
 	import { onMount } from 'svelte';
 
-	/** @type {{ onclose?: () => void; children?: import('svelte').Snippet }}*/
-	let { onclose } = $props();
+	/** @type {{ onclose?: () => void; children: import('svelte').Snippet }}*/
+	let { onclose, children } = $props();
 
 	/** @type {HTMLDialogElement} */
 	let modal;
@@ -45,7 +45,7 @@
 <div class="modal-background" />
 
 <dialog class="modal" tabindex="-1" bind:this={modal} {onclose}>
-	<slot />
+	{@render children()}
 </dialog>
 
 <style>

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 	import '@sveltejs/site-kit/styles/index.css';
 	import '../app.css';
 
-	let { data } = $props();
+	let { data, children } = $props();
 </script>
 
 <Shell>
@@ -46,7 +46,7 @@
 		</svelte:fragment>
 	</Nav>
 
-	<slot />
+	{@render children()}
 </Shell>
 
 {#if browser}