BaseTeleport
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: true or 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.