Skip to content

Custom element: event.currentTarget keeps being #shadow-root (document-fragment) while propagating outside once svelte handles the event #13030

Closed
@satouriko

Description

@satouriko

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
image

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

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions