/*** +page.svelte **/
<script>
import { onMount } from 'svelte';
let Thing;
const sleep = ms => new Promise(f => setTimeout(f, ms));
onMount(async () => {
await sleep(1000); // simulate network delay
Thing = (await import('./Thing.svelte')).default;
});
</script>
<svelte:component this={Thing} answer={42}>
<p>some slotted content</p>
</svelte:component>
/*** Thing.svelte ***/
<script>
export let answer;
</script>
<p>the answer is {answer}</p>
<slot></slot>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter