always dispatch event if component is custom element

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;

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);
+		}
 	};
 }
 

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>

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'));
+	});
+}