/*** +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>

/* +page.svelte **/

<script>
    import Component2 from "./Component2.svelte";
    
    function abc() {
    	const element = new Component2({
    		target: document.querySelector('#abc')
    	})
    }
</script>

<div id="abc" use:abc>dsaads</div>

/* Component2.svelte **/

<script>
  export let params;
</script>
<div>
	<table>
		<tr>
			<td>dsadasads</td>
		</tr>
	</table>
</div>

/* +page.svelte **/

<script>
    import Component2 from "./Component2.svelte";
    
    function abc() {
    	const element = new Component2({
    		target: document.querySelector('#abc')
    	})
    }
</script>

<div id="abc" use:abc>dsaads</div>

/* Component2.svelte **/

<script>
  export let params;
</script>
<div>
	<table>
		<tr>
			<td>dsadasads</td>
		</tr>
	</table>
</div>