diff --git a/.changeset/hungry-boxes-relate.md b/.changeset/hungry-boxes-relate.md
new file mode 100644
index 0000000000..926fdf7e50
--- /dev/null
+++ b/.changeset/hungry-boxes-relate.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: sanitize component event names
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index fa6c5608df..e3ed0c9e81 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -871,14 +871,10 @@ function serialize_inline_component(node, component_name, context) {
 	if (Object.keys(events).length > 0) {
 		const events_expression = b.object(
 			Object.keys(events).map((name) =>
-				b.prop(
-					'init',
-					b.id(name),
-					events[name].length > 1 ? b.array(events[name]) : events[name][0]
-				)
+				b.init(name, events[name].length > 1 ? b.array(events[name]) : events[name][0])
 			)
 		);
-		push_prop(b.prop('init', b.id('$$events'), events_expression));
+		push_prop(b.init('$$events', events_expression));
 	}
 
 	/** @type {import('estree').Statement[]} */
@@ -932,19 +928,18 @@ function serialize_inline_component(node, component_name, context) {
 
 		if (slot_name === 'default') {
 			push_prop(
-				b.prop(
-					'init',
-					b.id('children'),
+				b.init(
+					'children',
 					context.state.options.dev ? b.call('$.add_snippet_symbol', slot_fn) : slot_fn
 				)
 			);
 		} else {
-			serialized_slots.push(b.prop('init', b.key(slot_name), slot_fn));
+			serialized_slots.push(b.init(slot_name, slot_fn));
 		}
 	}
 
 	if (serialized_slots.length > 0) {
-		push_prop(b.prop('init', b.id('$$slots'), b.object(serialized_slots)));
+		push_prop(b.init('$$slots', b.object(serialized_slots)));
 	}
 
 	const props_expression =
diff --git a/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/Component.svelte
new file mode 100644
index 0000000000..4b4bd05df6
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<button on:click={() => dispatch('event-name')}>toggle</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/_config.js b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/_config.js
index 76492ec3a4..3a030adca4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/_config.js
@@ -3,11 +3,14 @@ import { ok, test } from '../../test';
 export default test({
 	html: `
 		<div>toggle</div>
+		<button>toggle</button>
 	`,
 
 	async test({ assert, target, window }) {
 		const div = target.querySelector('div');
+		const button = target.querySelector('button');
 		ok(div);
+		ok(button);
 		const event = new window.MouseEvent('some-event');
 
 		await div.dispatchEvent(event);
@@ -15,15 +18,17 @@ export default test({
 			target.innerHTML,
 			`
 			<div>toggle</div>
+			<button>toggle</button>
 			<p>hello!</p>
 		`
 		);
 
-		await div.dispatchEvent(event);
+		await button.click();
 		assert.htmlEqual(
 			target.innerHTML,
 			`
 			<div>toggle</div>
+			<button>toggle</button>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/main.svelte b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/main.svelte
index 5171820c83..d2023319a3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/event-handler-sanitize/main.svelte
@@ -1,8 +1,11 @@
 <script>
+	import Component from "./Component.svelte";
+
 	export let visible;
 </script>
 
 <div on:some-event='{() => visible = !visible}'>toggle</div>
+<Component on:event-name={() => visible = !visible}></Component>
 
 {#if visible}
 	<p>hello!</p>