bug: Cannot test that events bubble out of the shadow DOM

Start with the linked stencil-test-shadow-dom-event-repro repository and run npm run test to reproduce the failure. Then inspect Stencil's testing wrappers and compare the unit and E2E cases described in this issue; done means a test can observe customclick bubbling through the nested shadow DOM.

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.0.2

Current Behavior

It is not possible to detect custom events that bubble out of more than one layer of shadow DOM with Stencil's testing wrappers.

Implementation Setup

Suppose you have a web component, my-component that contains a button. When clicked, the button emits a customclick event. The button exists in my-component's shadow root.

Then, make a second web component (also with a shadow root) called my-wrapper-component. my-wrapper-component composes my-component, and does not modify the customclick event. The customclick event bubbles out of my-wrapper-component's shadow DOM.

<my-wrapper-component>
    <!--shadow root-->
        <my-component>
            <!--shadow root-->
                <button></button>
        </my-component>   
</my-wrapper-component>

Local testing shows that this setup works as expected on its own - so this is an issue with Stencil's test wrappers, not the component implementation itself.

Test Setup

A test like this passes, as expected.

  it('emits a customclick event when clicked', async () => {
    const specPage = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });
    const component = specPage.root;
    const eventSpy = jest.fn();
    component.addEventListener("customclick", eventSpy);
    const button = component.shadowRoot.querySelector("button");
    button.click();
    specPage.waitForChanges();
    expect(eventSpy).toHaveBeenCalled();
  });

However, it is not possible to write a test that asserts the customclick event is bubbled out of the my-wrapper-component element.

  it('emits the `customclick` emitted by my-component', async () => {
    const page = await newSpecPage({
      components: [MyWrapperComponent, MyComponent],
      html: `<my-wrapper-component></my-wrapper-component>`,
    });
    const wrapperComponent = page.root;
    const eventSpy = jest.fn();
    wrapperComponent.addEventListener("customclick", eventSpy);

    const innerComponent = wrapperComponent.shadowRoot.querySelector("my-component");
    innerComponent.dispatchEvent(new CustomEvent("customclick", { bubbles: true, composed: true}));

    await page.waitForChanges();

    expect(eventSpy).toHaveBeenCalled(); // fails, spy is never called
  });

I've tried modifying the above test to click on the button element directly (button.click()) rather than calling dispatchEvent. I've also tried rewriting the above as an E2E test. In both cases, I got the same test failure.

Expected Behavior

I would expect to be able to write at least an E2E test, if not also a unit test, that verifies an event can bubble out of a component's shadow DOM.

System Info

System: node 18.13.0
    Platform: windows (10.0.19045)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz (16 cpus)
    Compiler: C:\path-to-repo\stencil-test-shadow-dom-event-repro\node_modules\@stencil\core\compiler\stencil.js
       Build: 1690208707
     Stencil: 4.0.2
  TypeScript: 5.0.4
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.19.1

Steps to Reproduce

Clone the repo linked below and run npm run test.

Code Reproduction URL

https://github.com/cmardyla/stencil-test-shadow-dom-event-repro/tree/main

Additional Information

No response