svelte/attachments

import {
	Attachment,
	createAttachmentKey,
	fromAction
} from 'svelte/attachments';

Attachment

An attachment is a function that runs when an element is mounted to the DOM, and optionally returns a function that is called when the element is later removed.

It can be attached to an element with an {@attach ...} tag, or by spreading an object containing a property created with createAttachmentKey.

export interface interface Attachment<T extends EventTarget = Element>interface Attachment<T extends EventTarget = Element>Attachment<function (type parameter) T in Attachment<T extends EventTarget = Element>function (type parameter) T in Attachment<T extends EventTarget = Element>T extends EventTarget = Element> {/*…*/}

(element: T): void | (() => void);

createAttachmentKey

Available since 5.29

Creates an object key that will be recognised as an attachment when the object is spread onto an element, as a programmatic alternative to using {@attach ...}. This can be useful for library authors, though is generally not needed when building an app.

<script lang="ts">
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
</script>

<button {...props}>click me</button>

<script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
</script>

<button {...props}>click me</button>

export function createAttachmentKey(): symbol;

fromAction

Converts an action into an attachment keeping the same behavior. It's useful if you want to start using attachments on components but you have actions provided by a library.

Note that the second argument, if provided, must be a function that returns the argument to the action function, not the argument itself.

<!-- with an action -->
<div use:foo={bar}>...</div>

<!-- with an attachment -->
<div {@attach fromAction(foo, () => bar)}>...</div>

export function fromAction<E extends EventTarget, T extends unknown>(action: Action<E, T> | ((element: E, arg: T) => void | ActionReturn<T>), fn: () => T): Attachment<E>;
export function fromAction<E extends EventTarget>(action: Action<E, void> | ((element: E) => void | ActionReturn<void>)): Attachment<E>;