Closed
Description
Describe the bug
Let's say we have this code
<script lang="ts">
document.addEventListener('click', (e) => {
console.log('document', e, e.currentTarget);
})
document.getElementById('app')?.addEventListener('click', (e) => {
console.log('#app', e, e.currentTarget);
})
function onclick(event: Event) {}
</script>
<svelte:options
customElement={{
tag: 'my-custom-element',
}}
/>
<div {onclick}>
<slot />
</div>
<body>
<div id="app">
<my-custom-element><button>click me</button></my-custom-element>
</div>
</body>
When clicking the button, the printed event.currentTarget should be document
and #app
, but it turns out to be #shadow-root
Reproduction
https://github.com/satouriko/svelte-custom-element-bug
Logs
No response
System Info
System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 50.69 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
pnpm: 9.7.0 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
Browsers:
Chrome: 128.0.6613.85
Edge: 128.0.2739.42
Safari: 17.6
npmPackages:
svelte: 5.0.0-next.238 => 5.0.0-next.238
Severity
blocking all usage of svelte