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