---

title: BaseTeleport

---

# BaseTeleport

## Props

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

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             | 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:

```vue
<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:

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

### Disabled Teleport

Prevent teleporting the content:

```vue
<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.