From 3d256727bbc1d0c72650b31c09a420bce8d200a3 Mon Sep 17 00:00:00 2001
From: Geoff Cox <geoff.cox@live.com>
Date: Mon, 16 Sep 2024 11:06:02 -0700
Subject: [PATCH] docs: Add spread guidance for multiple event handlers
 (#13240)

* Update 04-event-handlers.md

Added documentation on managing multiple event handlers and spreading props.

* Update 04-event-handlers.md

Used spread variable rather than implying there was a props variable from $props above.

* tweak

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../docs/content/01-api/04-event-handlers.md       | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/04-event-handlers.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/04-event-handlers.md
index e249806931..5124ae291d 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/04-event-handlers.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/04-event-handlers.md
@@ -178,6 +178,20 @@ Duplicate attributes/properties on elements — which now includes event handler
 </button>
 ```
 
+When spreading props, local event handlers must go _after_ the spread, or they risk being overwritten:
+
+```svelte
+<button
+	{...props}
+	onclick={(e) => {
+		doStuff(e);
+		props.onclick?.(e);
+	}}
+>
+	...
+</button>
+```
+
 ## Why the change?
 
 By deprecating `createEventDispatcher` and the `on:` directive in favour of callback props and normal element properties, we: