data-teleport

Move an element elsewhere in the document, keeping its behaviour (Alpine’s x-teleport). Write the markup where it makes sense to author it, render it where it needs to live.

Syntax

data-teleport="body"
data-teleport="#toasts"

part
key	forbidden
value	required: a selector for the new parent (a literal); the element is appended to it

Modifiers

modifier	effect
__dynamic	evaluate the value as an expression that yields the selector

Escape a container

into a target box

target box

clicked

I was written after the button but live inside the target box, and I still see .

<div data-signals="{ n: 0 }">
  <div id="teleport-target" style="border:1px dashed var(--sl-color-hairline);padding:.5rem;margin-bottom:.5rem">target box</div>
  <button data-on:click="$n++">clicked <span data-text="$n"></span></button>
  <p data-teleport="#teleport-target" style="margin:.3rem 0 0">I was written after the button but live inside the target box, and I still see <b data-text="$n"></b>.</p>
</div>

Modals and toasts

The classic use: markup authored next to the button that opens it, rendered at the end of body so overflow: hidden and stacking contexts cannot clip it. This demo targets a box on the page rather than body.

layered UI

clipped container toggle panel

Rendered outside the clipped container, still driven by its signals.

<div data-signals="{ open: false }">
  <div style="overflow:hidden;height:2.5rem;border:1px dashed var(--sl-color-hairline);padding:.3rem">
    clipped container <button data-on:click="$open = !$open">toggle panel</button>
    <div data-teleport="#teleport-layer" data-show="$open" style="display:none;padding:.5rem;border:1px solid var(--sl-color-hairline);border-radius:.4rem;margin-top:.3rem">Rendered outside the clipped container, still driven by its signals.</div>
  </div>
  <div id="teleport-layer"></div>
</div>

Notes

Browsers with moveBefore move the element without unmounting it; others remove and re-insert it, which remounts its attributes (signals are unaffected). A missing target is reported as an error and the element stays put. The element is appended as the last child; order siblings in the target with CSS if needed.

Register

import { teleport } from 'sigmx/plugins'

Registering teleport adds 189 bytes brotli (198 gzip, 401 minified) on top of the core. See bundle sizes.