From 0b40585b7ae72f293f8bd8a6507c3bb8624ee75f Mon Sep 17 00:00:00 2001
From: hontas <lundin.pontus@gmail.com>
Date: Sun, 22 Dec 2019 01:33:24 +0100
Subject: [PATCH] always dispatch event if component is custom element

---
 src/runtime/internal/dom.ts                   |  3 ---
 src/runtime/internal/lifecycle.ts             |  7 ++++--
 .../samples/dispatch/main.svelte              | 14 +++++++++++
 test/custom-elements/samples/dispatch/test.js | 23 +++++++++++++++++++
 4 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 test/custom-elements/samples/dispatch/main.svelte
 create mode 100644 test/custom-elements/samples/dispatch/test.js

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 5b3c70261d..5bd9998daa 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -268,9 +268,6 @@ export function toggle_class(element, name, toggle) {
 }
 
 export function custom_event<T=any>(type: string, detail?: T) {
-        // is compile target customElement?
-        // is event not a Svelte event?
-        // use new CustomEvent with bubbles/composed = true for non, svelte event
 	const e: CustomEvent<T> = document.createEvent('CustomEvent');
 	e.initCustomEvent(type, false, false, detail);
 	return e;
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index 809a39d717..def46c7712 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/src/runtime/internal/lifecycle.ts
@@ -28,8 +28,6 @@ export function onDestroy(fn) {
 }
 
 export function createEventDispatcher() {
-        // is compile target customElement?
-        // always dispatch!
 	const component = get_current_component();
 
 	return (type: string, detail?: any) => {
@@ -43,6 +41,11 @@ export function createEventDispatcher() {
 				fn.call(component, event);
 			});
 		}
+
+		if (component.shadowRoot) {
+			const event = custom_event(type, detail);
+			component.dispatchEvent(event);
+		}
 	};
 }
 
diff --git a/test/custom-elements/samples/dispatch/main.svelte b/test/custom-elements/samples/dispatch/main.svelte
new file mode 100644
index 0000000000..540e549592
--- /dev/null
+++ b/test/custom-elements/samples/dispatch/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	const handleChange = evt => {
+		dispatch('change', evt);
+	};
+</script>
+
+<svelte:options tag="custom-element" />
+<label>
+	<input type="checkbox" on:change={handleChange} />
+</label>
diff --git a/test/custom-elements/samples/dispatch/test.js b/test/custom-elements/samples/dispatch/test.js
new file mode 100644
index 0000000000..698e74e397
--- /dev/null
+++ b/test/custom-elements/samples/dispatch/test.js
@@ -0,0 +1,23 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+console.log('console.log');
+
+export default async function(target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+	const label = el.shadowRoot.querySelector('label');
+	const input = el.shadowRoot.querySelector('input');
+
+	return new Promise(resolve => {
+		el.addEventListener('change', function changeHandler(evt) {
+			el.removeEventListener('change', changeHandler);
+
+			assert.equal(evt.target, el);
+			assert.equal(input.checked, true);
+			resolve();
+		});
+
+		label.dispatchEvent(new MouseEvent('click'));
+	});
+}