diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts
index 20e662a22b..f2c48c3169 100644
--- a/src/compiler/compile/nodes/EventHandler.ts
+++ b/src/compiler/compile/nodes/EventHandler.ts
@@ -3,6 +3,7 @@ import Expression from './shared/Expression';
import Component from '../Component';
import deindent from '../utils/deindent';
import Block from '../render_dom/Block';
+import { sanitize } from '../../utils/names';
export default class EventHandler extends Node {
type: 'EventHandler';
@@ -41,7 +42,7 @@ export default class EventHandler extends Node {
}
}
} else {
- const name = component.get_unique_name(`${this.name}_handler`);
+ const name = component.get_unique_name(`${sanitize(this.name)}_handler`);
component.add_var({
name,
diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/_config.js b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js
new file mode 100644
index 0000000000..030e27ad1a
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js
@@ -0,0 +1,18 @@
+export default {
+ html: `
+
+ `,
+
+ test({ assert, component, target, window }) {
+ const button = target.querySelector('button');
+ const event = new window.Event('click-now');
+
+ let clicked;
+ component.$on('click-now', () => {
+ clicked = true;
+ });
+
+ button.dispatchEvent(event);
+ assert.ok(clicked);
+ }
+};
diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte
new file mode 100644
index 0000000000..05de1316ef
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte
@@ -0,0 +1 @@
+
\ No newline at end of file