<h2>Overview</h2>
<p>The Svelte component for rendering outside the DOM of the parent component allows users to create a portal to render components outside of their parent component's DOM. This functionality was borrowed from an idea discussed in the Svelte repository. The component can be installed and used easily and also supports TypeScript.</p>
<h2>Features</h2>
<ul>
<li><strong>Portal component</strong>: The component allows for rendering components outside of the parent component's DOM. It has a single property called <code>target</code>, which can be either an HTMLElement or a CSS selector.</li>
<li><strong>Target property</strong>: The <code>target</code> property specifies the element where the component should be rendered. It can be specified as an HTMLElement using <code>target={document.body}</code> or as a CSS selector using <code>target="#modals"</code>.</li>
<li><strong>Default target</strong>: If no target is given, the component defaults to rendering in the <code>document.body</code>.</li>
<li><strong>Portal action</strong>: Users can also use a svelte action to apply the portal functionality directly to DOM elements.</li>
<li><strong>Hidden attribute</strong>: The <code>hidden</code> attribute is only needed when using server-side rendering (SSR). When the portal component moves an element to its target location, it removes the hidden attribute.</li>
<li><strong>TypeScript support</strong>: For TypeScript users, they should import from "svelte-portal/src/Portal.svelte" instead of "svelte-portal" to get proper typing support.</li>
</ul>


Romkor

Svelte Portal