Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
Svelte Template Directives
@attach (Svelte 5.29+)
The reactive alternative to `use:` actions. Re-runs when dependencies change, passes through components via spread, supports cleanup functions.
svelte
<script>
import ImageZoom from 'js-image-zoom';
function useZoom(options) {
return (element) => {
new ImageZoom(element, options);
return () => console.log('cleanup');
};
}
</script>
<!-- Re-runs if options changes (use: wouldn't!) -->
<figure {@attach useZoom({ width: 400 })}>
<img src="photo.jpg" alt="zoomable" />
</figure>Quick Reference
| Directive | Purpose | Reactive? |
|---|---|---|
{@attach} | DOM manipulation, 3rd-party | Yes |
{@html} | Render raw HTML strings | Yes |
{@render} | Render snippets | Yes |
{@const} | Local constants in blocks | N/A |
{@debug} | Pause debugger on value change | N/A |
{#each (key)} | Keyed iteration (always key!) | Yes |
<svelte:window> | Window event listeners | N/A |
@attach vs use: Actions
| Feature | use: | @attach |
|---|---|---|
| Re-runs on arg change | No | Yes |
| Composable | Limited | Fully |
| Pass through props | Manual | Auto via spread |
| Convert legacy | N/A | fromAction() |
Reference Files
- attach-patterns.md - Real-world @attach
examples
- other-directives.md - @html, @render,
@const, @debug
Notes
@attachrequires Svelte 5.29+- Use
fromActionfromsvelte/attachmentsto convert legacy actions - Attachments pass through wrapper components when you spread props
- Always use keyed each blocks — never use index as key
- Use
<svelte:window>/<svelte:document>for global events, not$effect - Last verified: 2026-03-12
<!-- PROGRESSIVE DISCLOSURE GUIDELINES:
- Keep this file ~50 lines total (max ~150 lines)
- Use 1-2 code blocks only (recommend 1)
- Keep description <200 chars for Level 1 efficiency
- Move detailed docs to references/ for Level 3 loading
- This is Level 2 - quick reference ONLY, not a manual
-->
