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