Events are not emitted from components compiled to a custom element

[vogloblinsky]

The native Svelte syntax for listening events on:mycustomevent doesn't works with events dispatched by a Svelte component exported to Custom Element.

May be related to this ?

svelte/src/runtime/internal/Component.ts

Lines 162 to 171 in a0e0f01

	$on(type, callback) {
	// TODO should this delegate to addEventListener?
	const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
	callbacks.push(callback);
	return () => {
	const index = callbacks.indexOf(callback);
	if (index !== -1) callbacks.splice(index, 1);
	};
	}

Here is a reproduction repository :

https://github.com/vogloblinsky/svelte-3-wc-debug

svelte3-raw

Example using just Svelte syntax. Inner component dispatch a custom event 'message'. App component listen to it using on:message

It works !

//Inner.svelte
<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function sayHello() {
        console.log('sayHello in child: ', 'Hello!');
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

//App.svelte
<script>
	import Inner from './Inner.svelte';

	function handleMessage(event) {
		console.log('handleMessage in parent: ', event.detail.text);
	}
</script>

<Inner on:message={handleMessage}/>

svelte3-wc

Example using just Svelte syntax and exporting component to Web Components. Inner component dispatch a custom event 'message'. App component listen to it using on:message

Same syntax doesn't work.

//Inner.svelte
<svelte:options tag="inner-btn"/>
<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function sayHello() {
        console.log('sayHello in child: ', 'Hello!');
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

//App.svelte
<svelte:options tag="my-app" />
<script>
	import Inner from './Inner.svelte';

	function handleMessage(event) {
		console.log('handleMessage in parent: ', event.detail.text);
	}
</script>

<inner-btn on:message={handleMessage}/>

Vanilla JS works fine in public/index.html

const button = document
                    .querySelector('my-app')
                    .shadowRoot.querySelector('inner-btn');

                button.$on('message', e => {
                    console.log('handleMessage in page');
                });

[asif-ahmed-1990]

I ran into a similar problem today and found a workaround for now.

createEventDispatcher uses the following for creating a custom event.

svelte/src/runtime/internal/dom.ts

Lines 254 to 257 in a0e0f01

	export function custom_event<T=any>(type: string, detail?: T) {
	const e: CustomEvent<T> = document.createEvent('CustomEvent');
	e.initCustomEvent(type, false, false, detail);
	return e;

Now, for custom elements, the custom event by default does not go past the boundaries of the shadowDom. For that to happen, a property named composed has to be set to true. (Refer: Event.composed)

To make it cross the boundaries of shadowDom we have to create a Custom Event as mentioned in the v2 docs for svelte in vanilla JS.

const event = new CustomEvent('message', {
	detail: 'Hello parent!',
	bubbles: true,
	cancelable: true,
	composed: true // makes the event jump shadow DOM boundary
});

this.dispatchEvent(event);

Link: Firing events from Custom Element in Svelte

Note: I am new to Svelte and may be terribly wrong with my analysis 😅 Probably @Rich-Harris can clear it out.

[vogloblinsky]

Thanks @asifahmedfw for your feedbacks.

Just discovered inside Svelte codebase that an deprecated APi is called by Svelte :

svelte/src/runtime/internal/dom.ts

Line 255 in 767ce22

e.initCustomEvent(type, false, false, detail);

https://developer.mozilla.org/fr/docs/Web/API/CustomEvent/initCustomEvent

cc @Rich-Harris

[Conduitry]

See #2101 for why we're using that API.

[vogloblinsky]

@Conduitry ok i understand better

[pbastowski]

See #2101 for why we're using that API.

Is this the reason why Svelte 3 custom events do not reach the custom element itself?

I have encountered the same problem as described by the original poster and am looking for a clean solution. Hopefully without resorting to creating Event objects and manually dispatching them.

[pbastowski]

I am thinking about using Svelte in a large company, to build features wrapped in WebComponents almost exclusively, because web-components are their strategy for the future. I am proposing Svelte 3 instead of lit-element, their current choice, because lit-element lacks a lot of functionality present in modern front-end frameworks. Also because I think Svelte 3 is the easiest to learn and maintain, powerful front-end framework to date (having used VueJs 2 since 2016 and AngularJs since 2012).

However, there is an issue that I have encountered, which could prevent the adoption of Svelte 3 in this company. The problem is that custom events emitted from within a Svelte 3 feature wrapped as a web-component do not bubble up to the web-component itself as normal DOM events and can not be handled in the usual manner within the template, for example

This does not work

<my-feature onmy-special-event="handler()">

Workaround 1

Instead we have to write special code in JS that looks up the <my-feature> element, after DOM has been mounted, and then manually assign a handler using $on like this:

window.addEventListener('load', () => {
    document.querySelector('my-feature').$on('my-special-event', handler)
})

Although doable, this is a cumbersome and non-standard way to add event handlers to the custom web-component element.

Workaround 2

Same method as mentioned above, which involves creating a native DOM Event and dispatching it manually from within a Svelte event handler. Note that you need composed:true otherwise it won't break the shadowRoot barrier.

Event

let event = new Event('my-special-event', { 
    detail: {abc: 123}, 
    bubbles: true, 
    composed: true 
})

Svelte template event handler

<my-input on:my-click={()=>el.dispatchEvent(event)} />

Request

Can we automatically add the required functionality, when compiling to a web-component target, to auto forward real DOM events to the custom element for each forwarded Svelte event?

I'm happy to help, but don't know where to start in the codebase.

[petterek]

Anyone looking into this.. Exposing custom events from custom elements must be a thing that is needed?
Should also be doable to fix this if the 'custom element' root is exposed somehow.

Then root.dispatchEvent('name', options) would do it.
As of now I cannot see a way to get a reference to the root element of the custom control.. but I might be wrong..

[TehShrike]

In Svelte 3 I'm working around this with

import { createEventDispatcher } from "svelte"
import { get_current_component } from "svelte/internal"

const component = get_current_component()
const svelteDispatch = createEventDispatcher()
const dispatch = (name, detail) => {
	svelteDispatch(name, detail)
	component.dispatchEvent && component.dispatchEvent(new CustomEvent(name, { detail }))
}

[TehShrike]

One possible solution might be to use

return new CustomEvent(type, { detail })

when targeting custom elements, and use the current

const e = document.createEvent('CustomEvent')
e.initCustomEvent(type, false, false, detail)
return e

method otherwise.