portal

Teleports an element to a different location in the DOM. Essential for modals, tooltips, and toasts.

Usage

Why Use Portals?

  • Z-index issues - Escape stacking contexts for modals
  • Overflow clipping - Prevent parent overflow:hidden from clipping
  • CSS isolation - Avoid inherited styles affecting overlays
  • Semantic HTML - Keep components logically grouped in source

Examples

Modal Dialog

Tooltip

Toast Container

API

portal(node, target?)

node HTMLElement

The element to teleport (provided by Svelte)

target string | HTMLElement

CSS selector or element (default: 'body')

Target Options

Setting Up Portal Targets

Add portal targets to your app.html:

Notes

  • Cleanup - Element is removed from DOM when component destroys
  • Reactivity - Target can be updated dynamically
  • Events - Event handlers still work as expected
  • Styles - Scoped styles won't apply (use global or inline)