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.
target
, which can be either an HTMLElement or a CSS selector.target
property specifies the element where the component should be rendered. It can be specified as an HTMLElement using target={document.body}
or as a CSS selector using target="#modals"
.document.body
.hidden
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.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.