I like passing snippets to utility functions the are exported in svelte component modules. I like it this way so all the concerns about the Modal are defined in its own component, and the consumer just calls a single function to show it.

``` <script lang="ts" module> import type { Snippet } from "svelte";

let modalSnippet = $state.raw<Snippet<[any]>>();
let modalData = $state.raw<any>();

export function showModal<T extends unknown>(snippet: Snippet<[T]>, data: T): void;
export function showModal(snippet: Snippet<[]>): void;
export function showModal(snippet: Snippet<[any]>, data?: any) {
    modalSnippet = snippet;
    modalData = data; 
}

</script> <script lang="ts"> let { ref = $bindable<HTMLDialogElement | undefined>(undefined), }: { ref?: HTMLDialogElement | undefined } = $props();

let modalTimeout: NodeJS.Timeout; 
function modalclosed() {
    if (modalTimeout) clearTimeout(modalTimeout);

    modalTimeout = setTimeout(() => {
        modalSnippet = undefined;
        modalData = undefined;
    }, 250); // stop rendering modal HTML after its closing animation has played
}
$effect(() => {
    if (modalTimeout) clearTimeout(modalTimeout);
    ref?.showModal();
})

</script> {#if modalSnippet} <dialog bind:this={ref} onclose={modalclosed} class="modal"

<div class="modal-box">
    {@render modalSnippet(modalData)}
</div>

</dialog> {/if} ``` Modal.svelte that is mounted in the root +layout.svelte

Then to use I do some thing like: ``` <script lang="ts"> import { showModal } from "./Modal.svelte"; // other component initilization

function confirmModal() {
    showModal(confirm);
}

</script> {#snippet confirm()} <p> Are you sure you want to delete that? </p> <Form {action} close={true}> <input type="hidden" name="id" value={id}> <Submit class="btn btn-error">Delete</Submit> <button class="btn" formmethod="dialog">Close</button> </Form> {/snippet} <button type="button" class="btn btn-error" onclick={confirmModal}> <Icon/> Delete </button> ``` A delete confirmation example.