<script>
import { createPortal } from "./actions";
import Component from "./Component.svelte";
let mounted = false;
</script>
<style>
.app {
background: steelblue;
padding: 16px;
}
h2 {
margin: 16px;
}
.portal {
color: white;
padding: 16px;
background: purple;
}
button {
margin: 16px;
}
</style>
<div class="app">
<h2>App</h2>
<div use:createPortal={'foo'} class="portal">
<h3>Portal</h3>
</div>
{#if mounted}
<Component />
{/if}
<button on:click={() => (mounted = !mounted)}> {mounted ? 'unmount' : 'mount Component'} </button>
</div>