fix: allow custom element events on slot to bubble inside custom element (#13222)

Fixes #13162

We were going from parentNode to parentNode but if something is a slot of a custom element we should first go to the assignedSlot or else the inside of the custom element will be skipped.

---------

Co-authored-by: Oscar Dominguez <[email protected]>

Author: paoloricciuti

.changeset/flat-flies-know.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow custom element events on slot to bubble inside custom element

packages/svelte/src/internal/client/dom/elements/events.js

@@ -233,7 +233,10 @@ export function handle_event_propagation(event) {
 		while (current_target !== null) {
 			/** @type {null | Element} */
 			var parent_element =
-				current_target.parentNode || /** @type {any} */ (current_target).host || null;
+				current_target.assignedSlot ||
+				current_target.parentNode ||
+				/** @type {any} */ (current_target).host ||
+				null;
 
 			try {
 				// @ts-expect-error

packages/svelte/tests/runtime-browser/custom-elements-samples/events-slotted/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element><span></span></custom-element>';
+
+		const custom_element = target.querySelector('custom-element');
+
+		const logs = [];
+		custom_element.callback = () => {
+			logs.push('called');
+		};
+
+		await tick();
+		/** @type {any} */
+		const span = target.querySelector('span');
+		span.click();
+		assert.deepEqual(logs, ['called']);
+	}
+});

packages/svelte/tests/runtime-browser/custom-elements-samples/events-slotted/main.svelte

@@ -0,0 +1,7 @@
+<svelte:options customElement="custom-element" />
+
+<button onclick={(e)=>{
+	$host().callback();
+}}>
+	<slot></slot>
+</button>