Overview
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.
Features
- Portal component: The component allows for rendering components outside of the parent component's DOM. It has a single property called
target, which can be either an HTMLElement or a CSS selector. - Target property: The
targetproperty specifies the element where the component should be rendered. It can be specified as an HTMLElement usingtarget={document.body}or as a CSS selector usingtarget="#modals". - Default target: If no target is given, the component defaults to rendering in the
document.body. - Portal action: Users can also use a svelte action to apply the portal functionality directly to DOM elements.
- Hidden attribute: The
hiddenattribute 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. - TypeScript support: For TypeScript users, they should import from "svelte-portal/src/Portal.svelte" instead of "svelte-portal" to get proper typing support.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.