A Teleport component, also known as a Portal component, as the name implies, is a component that can make an element go from one component to another. This may seem strange in the first instance, but it has a lot of applications, including dialogs, custom menus, alerts, badges, and many other customs UIs that need to appear in special places.
Imagine a header component, where you want a custom slot on the component so you can place components:
<template>
<header>
<div id="blue-portal" />
</header>
</header>
Then, you want to display a custom button on this header, but you want to call this button from a page. You just need to execute the following code:
<template>
<page>
<Teleport to="blue-portal">
<button class="orange-portal">Cake</button>
</Teleport>
</page>
</template>
Now, your button will be displayed on the header, but the code will be executed on...
