fix: event listener not being invoked for native web components (#4012)

* fix: event listener not being invoked for native web components

* chore: simplify test

* chore: test tweaks

* chore: also avoid wrapping listeners for non-Node EventTargets

* chore: account for light dom nodes

* chore: account for window

---------

Co-authored-by: Eugene Kashida <[email protected]>

packages/@lwc/integration-karma/test/mixed-shadow-mode/composed-path/index.spec.js

@@ -0,0 +1,44 @@
+import { createElement } from 'lwc';
+import Test from 'x/test';
+
+describe('event.composedPath() of event dispatched from closed shadow root', () => {
+    it('should have shadowed elements when invoked inside the shadow root', () => {
+        const elm = createElement('x-test', { is: Test });
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            elm.clickShadowedButton();
+
+            expect(elm.getShadowedComposedPath()).toEqual([
+                jasmine.any(HTMLElement), // button
+                jasmine.any(Object), // #shadow-root(closed)
+                elm.child,
+                elm.shadowRoot,
+                elm,
+                document.body,
+                document.documentElement,
+                document,
+                window,
+            ]);
+        });
+    });
+
+    it('should not have shadowed elements when invoked outside the shadow root', () => {
+        const elm = createElement('x-test', { is: Test });
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            elm.clickShadowedButton();
+
+            expect(elm.getComposedPath()).toEqual([
+                elm.child,
+                elm.shadowRoot,
+                elm,
+                document.body,
+                document.documentElement,
+                document,
+                window,
+            ]);
+        });
+    });
+});

packages/@lwc/integration-karma/test/mixed-shadow-mode/composed-path/x/test/component.js

@@ -0,0 +1,18 @@
+customElements.define(
+    'x-mixed-shadow-mode-composed-path',
+    class extends HTMLElement {
+        constructor() {
+            super();
+            this._shadowRoot = this.attachShadow({ mode: 'closed' });
+            this._button = document.createElement('button');
+            this._button.addEventListener('click', (event) => {
+                this.composedPath = event.composedPath();
+            });
+            this._shadowRoot.appendChild(this._button);
+        }
+
+        click() {
+            this._button.click();
+        }
+    }
+);

packages/@lwc/integration-karma/test/mixed-shadow-mode/composed-path/x/test/test.html

@@ -0,0 +1,3 @@
+<template>
+    <x-mixed-shadow-mode-composed-path lwc:external lwc:ref="child" onclick={handleClick}></x-mixed-shadow-mode-composed-path>
+</template>

packages/@lwc/integration-karma/test/mixed-shadow-mode/composed-path/x/test/test.js

@@ -0,0 +1,30 @@
+import { LightningElement, api } from 'lwc';
+import './component.js';
+
+export default class Parent extends LightningElement {
+    composedPath;
+
+    @api
+    get child() {
+        return this.refs.child;
+    }
+
+    @api
+    getShadowedComposedPath() {
+        return this.child.composedPath;
+    }
+
+    @api
+    getComposedPath() {
+        return this.composedPath;
+    }
+
+    @api
+    clickShadowedButton() {
+        this.child.click();
+    }
+
+    handleClick(event) {
+        this.composedPath = event.composedPath();
+    }
+}

packages/@lwc/synthetic-shadow/src/polyfills/event-target/polyfill.ts

@@ -10,6 +10,8 @@ import {
     eventTargetPrototype,
     removeEventListener as nativeRemoveEventListener,
 } from '../../env/event-target';
+import { Node } from '../../env/node';
+import { isInstanceOfNativeShadowRoot } from '../../env/shadow-root';
 import {
     addCustomElementEventListener,
     removeCustomElementEventListener,
@@ -28,6 +30,13 @@ function patchedAddEventListener(
         // @ts-expect-error type-mismatch
         return addCustomElementEventListener.apply(this, arguments);
     }
+
+    if (this instanceof Node && isInstanceOfNativeShadowRoot(this.getRootNode())) {
+        // Typescript does not like it when you treat the `arguments` object as an array
+        // @ts-expect-error type-mismatch
+        return nativeAddEventListener.apply(this, arguments);
+    }
+
     if (arguments.length < 2) {
         // Slow path, unlikely to be called frequently. We expect modern browsers to throw:
         // https://googlechrome.github.io/samples/event-listeners-mandatory-arguments/