BaseTeleport

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.

Props

Name	Description	Type	Default
target	(Required) The element or CSS selector to which the component is teleported.	String
position	The position relative to the target. Possible values:   - 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	(Required) It allows you to activate or deactivate the teleport function. Two possible values: trueor false. If deactivated (false), the slot content is not teleported.	Boolean	false

Slots

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

Events

This component emits no events.

Examples

Basic example to show how to 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>

Deactivating Teleport

Prevent teleporting the content:

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

note

When using the onlychild position, all other children of the target element are hidden.

note

The component supports shadow DOM integration, automatically handling style injection. However, Empathy's custom CSS injector is required, and Teleport depends on it to add the styles.