Custom element dispatch event

src/runtime/internal/dom.ts

@@ -307,4 +307,4 @@ export class HtmlTag {
 	d() {
 		this.n.forEach(detach);
 	}
-}
+}

src/runtime/internal/lifecycle.ts

@@ -41,6 +41,11 @@ export function createEventDispatcher() {
 				fn.call(component, event);
 			});
 		}
+
+		if (component.shadowRoot) {
+			const event = custom_event(type, detail);
+			component.dispatchEvent(event);
+		}
 	};
 }
 
@@ -61,4 +66,4 @@ export function bubble(component, event) {
 	if (callbacks) {
 		callbacks.slice().forEach(fn => fn(event));
 	}
-}
+}

test/custom-elements/samples/dispatch/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	const sayHello = () => {
+		dispatch('message', {
+      text: 'Hello!'
+    });
+	};
+</script>
+
+<svelte:options tag="custom-element" />
+<button on:click={sayHello}>
+	Click to say hello
+</button>

test/custom-elements/samples/dispatch/test.js

@@ -0,0 +1,24 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default async function(target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+	const button = el.shadowRoot.querySelector('button');
+
+	return new Promise((resolve, reject) => {
+		el.addEventListener('message', function changeHandler(evt) {
+			el.removeEventListener('message', changeHandler);
+
+      try {
+        assert.equal(evt.target, el);
+        assert.equal(evt.detail.text, 'Hello!');
+        resolve();
+      } catch (err) {
+        reject(err);
+      }
+		});
+
+		button.dispatchEvent(new MouseEvent('click'));
+	});
+}