BaseTeleport

Props

Name	Description	Type	Default
target	The element or css selector to which the component will be teleported.	string | Element
position	The position relative to the target - beforebegin: Before the target element. - afterbegin: Inside the target element, before its first child. - beforeend: Inside the target element, after its last child. - afterend: After the target element. - onlychild: Adds it as child and hides all other children of the target element.	string	'onlychild'
disabled	If disabled, the slot content will not be teleported	boolean	false
hostStyle	Styles for the teleport (content container)	string | CSSStyleDeclaration

Slots

Name	Description	Bindings (name - type - description)
default		None

Example

The BaseTeleport component allows you to teleport its slot content to a specified target element in the DOM. It provides flexibility in positioning the content relative to the target element and supports shadow DOM integration.

Basic example

Teleport content to a specific element in the DOM:

<template>
  <BaseTeleport target="#my-target">
    <div>This content will be teleported.</div>
  </BaseTeleport>
</template>

Positioning options

Teleport content inside the target element, before its first child:

<template>
  <BaseTeleport target="#my-target" position="afterbegin">
    <div>Teleported content at the beginning.</div>
  </BaseTeleport>
</template>

Disabled Teleport

Prevent teleporting the content:

<template>
  <BaseTeleport target="#my-target" :disabled="true">
    <div>This content will not be teleported.</div>
  </BaseTeleport>
</template>

Notes

• When using the onlychild position, all other children of the target element will be hidden.
• The component supports shadow DOM integration, automatically handling style injection. Anyway, Empathy's custom CSS injector is required. Teleport depends on it to add the styles.