Svelte 5: Event target is not retargeted after shadow dom

[GatienBouyer]

Describe the bug

When using shadowDOM, event are "retargeted" to hide the inner representation of the element.

Composed events dispatched from within a shadow root are retargeted, meaning that to any listener on an element hosting a shadow root or any of its ancestors, they appear to come from the hosting element.

from https://lit.dev/docs/components/events/#shadowdom-retargeting

I usually use retargeting to get the instance of the custom element (e.g. a card element) rather than the image or text element inside it. It allows having a single listener on the container when a huge number of elements is expected.

With Svelte 5 and the new on[event] syntax, the Event.target is not retargeted.

It was working with Svelte 4.

The issue can be circumvented by manually adding the event listener (see example code below).

Other issues related to the subject:

• Svelte 5: Incorrect target and currentTarget when using on: directive #10215
• Svelte5: event.currentTarget always equals event.target #11328

Reproduction

Here is the REPL :
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA31TUU_bMBD-K57FQ5CaVLyWthNiSDwUmACJh3kKxr62BteO7Es7FOW_75wEWjY2KZLjy9133933peFLYyHyyY-GO7kBPuFnVcVHHF-rdIlbsAh0j74OKkWmUQVT4Vw4gWZT-YCs8e7K1w5btgx-w8RQJfjpQZLgxfgSrPUPPlhdPMfhswVklH3CZuwookTIjrv4gJllx2w2Z00KCUyJhdT6YgsOFyYiOAiZ4Moa9SL4iGVwmC5QeRe9hcL6VfaYChcTdtRAgTKsAL_SubqmsdvH41M2HrPLi8XiJn-4uV186xHankx_0MuydgqNd8y7rmfqNzT70Gr4_N9md9_Prjtw4abj_Vbd9Eues36FuVk5H4DJk5PXskMsIY0ey7XcQvkCr8Od5fn835XOl2m1RpVgYUP5pXEIQXajvNVqs2VPxukJrk2cNWnVbZK2a9t2ek_XScB8lxScT8eHtzQDIdBJZtl4bZYGNJ9gqKEdvXtrb4C9xZ7job2UlTGyfR6DXySyptD91eKiZ99vPO2b4BX6kL2LEOuKDNGLJjBNUpRxLbXf3XqP5LEuJBGlWt918axhRBcmZFBfgROcvWk-NHGgEPS5tPZJkuAf9EaGxI9gtVd1olaoAOThgSg5M1aSMHvElFsYAgz39DYT_TpYt8Dhb_ibcyEroqXP18bqLCG8s6PHLFm2I838rlB1RL8ZGseCDEfdDxQiEmw2Y7XTsDQO9DDH59V9zp8AowNdEov2M7F_tr8B8XsZ6FQEAAA=

Main Svelte file:

<script>
	import {onMount} from "svelte";
	import "./HelloWorld.js";
	let elt1 = $state();
	onMount(() => {
		elt1.addEventListener("click", (e) => {
			console.log(`addEL: ${e.target?.tagName}`); // HELLO-WORLD, as expected
		});
	});

	function onclick(e) {
		console.log(`onclick: ${e.target?.tagName}`); // SPAN, error!
	}
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div bind:this={elt1} {onclick}>
	<hello-world></hello-world>
</div>

Custom element definition in HelloWorld.js:

class HelloWorld extends HTMLElement {
	constructor() {
		super();
		this._shadowRoot = this.attachShadow({ mode: "open" });
	}
	connectedCallback() {
		const text = document.createElement("span");
		text.innerText="Hello world";
		this._shadowRoot.appendChild(text);
	}
}
if (window.customElements.get("hello-world") == undefined) {
	window.customElements.define("hello-world", HelloWorld);
}

Logs

No response

System Info

REPL: Svelte compiler version 5.0.0-next.148

Severity

blocking an upgrade