element Class — svelte Architecture

Source Code

packages/svelte/types/index.d.ts lines 706–843

declare module 'svelte/attachments' {
	/**
	 * An [attachment](https://svelte.dev/docs/svelte/@attach) 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`](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).
	 */
	export interface Attachment<T extends EventTarget = Element> {
		(element: T): void | (() => void);
	}
	/**
	 * 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.
	 *
	 * ```svelte
	 * <script>
	 * 	import { createAttachmentKey } from 'svelte/attachments';
	 *
	 * 	const props = {
	 * 		class: 'cool',
	 * 		onclick: () => alert('clicked'),
	 * 		[createAttachmentKey()]: (node) => {
	 * 			node.textContent = 'attached!';
	 * 		}
	 * 	};
	 * </script>
	 *
	 * <button {...props}>click me</button>
	 * ```
	 * @since 5.29
	 */
	export function createAttachmentKey(): symbol;
	/**
	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) 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.
	 *
	 * ```svelte
	 * <!-- 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>;
	/**
	 * Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) 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.
	 *
	 * ```svelte
	 * <!-- with an action -->
	 * <div use:foo={bar}>...</div>
	 *
	 * <!-- with an attachment -->
	 * <div {@attach fromAction(foo, () => bar)}>...</div>
	 * ```
	 * */
	export function fromAction<E extends EventTarget>(action: Action<E, void> | ((element: E) => void | ActionReturn<void>)): Attachment<E>;
	/**
	 * Actions can return an object containing the two properties defined in this interface. Both are optional.
	 * - update: An action can have a parameter. This method will be called whenever that parameter changes,
	 *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
	 *   mean that the action accepts no parameters.
	 * - destroy: Method that is called after the element is unmounted
	 *
	 * Additionally, you can specify which additional attributes and events the action enables on the applied element.
	 * This applies to TypeScript typings only and has no effect at runtime.
	 *
	 * Example usage:
	 * ```ts
	 * interface Attributes {
	 * 	newprop?: string;
	 * 	'on:event': (e: CustomEvent<boolean>) => void;