svelte-portal

• Purpose: Enables rendering Svelte components outside their parent component's DOM hierarchy, useful for modals, tooltips, or other UI elements that need to break out of the current DOM context.
• Key Features:
  • Provides a <Portal> component and a portal action for flexible usage.
  • Supports targeting existing DOM elements via HTMLElement or CSS selector (defaults to document.body).
  • SSR-compatible (uses hidden attribute for initial rendering).
• Target Audience: Svelte developers needing to render content at a different DOM level (e.g., modals, overlays).
• Svelte Support: Primarily designed for Svelte, with TypeScript support via direct import ("svelte-portal/src/Portal.svelte").

Usage Highlights:

• Component:

  <Portal target="body">
    <div>Rendered outside parent DOM</div>
  </Portal>
  

• Action:

  <div use:portal={"body"} hidden>Moved to target on mount</div>
  

Original inspiration