Teleport #

Relocates elements in the DOM, in the rare cases that's useful and the best solution. (like when you need to escape overflow containment or avoid inheriting styles without restructuring the component tree) Does not work with SSR.

import Teleport from '@fuzdev/fuz_ui/Teleport.svelte';

<Teleport to={swap ? port1 : port2}>
	🐰
</Teleport>
<div class="ports">
	<div bind:this={port1} class="panel" />
	<div bind:this={port2} class="panel" />
</div>
<button onclick={() => (swap = !swap)}>
	teleport the bunny
</button>