Events are not emitted from components compiled to a custom element

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 ? https://github.com/sveltejs/svelte/blob/a0e0f0125aa554b3f79b0980922744ee11857069/src/runtime/internal/Component.ts#L162-L171

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

[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 }))
}

[Grafikart]

I face the same issue and it’s a dealbreaker 😦

I confirm what @TehShrike said and his solution proves that it could work

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 }))
}