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 <dominguez.celada@gmail.com>
pull/13230/head
Paolo Ricciuti 2 months ago committed by GitHub
parent 6604e38059
commit 09dff9bde2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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

@ -233,7 +233,10 @@ export function handle_event_propagation(event) {
while (current_target !== null) { while (current_target !== null) {
/** @type {null | Element} */ /** @type {null | Element} */
var parent_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 { try {
// @ts-expect-error // @ts-expect-error

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

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