bug: mock-doc does not retarget composed events at shadow boundaries

Open
  • Is something wrong?
#7,012 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
typescript
Domain
testing, web-dev

Research direction

Start by running the repro in src/testing/test/shadow-dom-events.spec.tsx with the fixture in src/testing/test/__fixtures__/shadow-events.tsx, which shows an outer listener receiving the inner element as event.target. The body says a fix already exists in #7008, so check that PR first, since the work is under way. Done means outer listeners see the shadow host as event.target, inner listeners still see the original target, and any existing spec expectations that depended on the old value are updated.

Written by the indexing model from the issue text.

Description

Prerequisites
Stencil Version

4.45.3 (current main)

Current Behavior

When a composed event bubbles out of a shadow tree in mock-doc, listeners outside that tree see the element the event was dispatched on as event.target. A browser retargets the event to the shadow host at every boundary it crosses.

Expected Behavior

Listeners outside a shadow tree see the shadow host as event.target, like in a browser. Listeners inside the tree keep seeing the original target.

System Info
Not environment specific, mock-doc behavior.
Steps to Reproduce

Two nested shadow components, event-wrapper-component renders event-inner-component:

const page = await newSpecPage({
  components: [EventWrapperComponent, EventInnerComponent],
  html: '<event-wrapper-component></event-wrapper-component>',
});
let target: any;
page.root.addEventListener('customclick', (ev: any) => (target = ev.target));

const inner = page.root.shadowRoot.querySelector('event-inner-component');
inner.dispatchEvent(new CustomEvent('customclick', { bubbles: true, composed: true }));

expect(target).toBe(inner); // passes on main, a browser gives you page.root
Code Reproduction URL

https://github.com/stenciljs/core/pull/7008 (src/testing/test/shadow-dom-events.spec.tsx and src/testing/test/__fixtures__/shadow-events.tsx)

Additional Information

This is not #4618. That one asks whether the event reaches the wrapper at all, and it does since #6301.

Fixing this changes what existing spec tests observe. A test that currently expects the inner element as event.target on an outer listener will fail afterwards, even though the new value is the correct one.

I have a fix in #7008.

Dominant language
TypeScript
Stars
13.2k
Forks
865
Avg merge
2d 16h
Merged PRs (30d)
29

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.