```js
// @noErrors
import { createAttachmentKey, fromAction } from 'svelte/attachments';
```

## createAttachmentKey

<blockquote class="since note">

Available since 5.29

</blockquote>

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>
```

<div class="ts-block">

```dts
function createAttachmentKey(): symbol;
```

</div>



## fromAction

<div class="ts-block">

```dts
function fromAction<
	Node extends HTMLElement,
	Parameter extends any
>(
	...args: undefined extends NoInfer<Parameter>
		? [
				action: (
					node: Node,
					parameter?: never
				) => void | ActionReturn<
					Parameter,
					Record<never, any>
				>,
				parameter?: (() => NoInfer<Parameter>) | undefined
			]
		: [
				action: (
					node: Node,
					parameter: Parameter
				) => void | ActionReturn<
					Parameter,
					Record<never, any>
				>,
				parameter: () => NoInfer<Parameter>
			]
): Attachment<Node>;
```

</div>



## Attachment

An [attachment](/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`](/docs/svelte/svelte-attachments#createAttachmentKey).

<div class="ts-block">

```dts
interface Attachment<T extends EventTarget = Element> {/*…*/}
```

<div class="ts-block-property">

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

<div class="ts-block-property-details"></div>
</div></div>

## FromAction

<div class="ts-block">

```dts
interface FromAction<
	Element extends EventTarget = HTMLElement,
	Par = unknown
> {/*…*/}
```

<div class="ts-block-property">

```dts
<Node extends Element, Parameter extends Par>(
	...args: undefined extends NoInfer<Parameter>
		? [
				action: (node: Node, parameter?: never) => void | ActionReturn<Parameter>,
				parameter?: () => NoInfer<Parameter>
			]
		: [
				action: (node: Node, parameter: Parameter) => void | ActionReturn<Parameter>,
				parameter: () => NoInfer<Parameter>
			]
): Attachment<Node>;
```

<div class="ts-block-property-details"></div>
</div></div>