diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index c641315bc37b..5bd9998daac0 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -307,4 +307,4 @@ export class HtmlTag {
d() {
this.n.forEach(detach);
}
-}
\ No newline at end of file
+}
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index a8e37e9632a3..def46c771257 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/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));
}
-}
\ No newline at end of file
+}
diff --git a/test/custom-elements/samples/dispatch/main.svelte b/test/custom-elements/samples/dispatch/main.svelte
new file mode 100644
index 000000000000..30e6633db222
--- /dev/null
+++ b/test/custom-elements/samples/dispatch/main.svelte
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/test/custom-elements/samples/dispatch/test.js b/test/custom-elements/samples/dispatch/test.js
new file mode 100644
index 000000000000..f301bb15bca7
--- /dev/null
+++ b/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 = '';
+ 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'));
+ });
+}