fix(engine): handling dispatching events inside of root event handlers

packages/lwc-engine/src/framework/__tests__/events.spec.ts

@@ -783,6 +783,42 @@ describe('Shadow Root events', () => {
 
         HTMLElement.prototype.querySelector.call(elm, 'x-grand-child').click();
     });
+
+    it('should have correct target when native event gets dispatched from within shadow root event handler', () => {
+        expect.assertions(1);
+        let clickSpy;
+        function html($api, $cmp) {
+            return [
+                $api.h('div', {
+                    key: 0,
+                    on: {
+                        click: $api.b($cmp.onDivClick)
+                    }
+                }, [])];
+        }
+
+        class MyComponent extends Element {
+            constructor() {
+                super();
+                this.template.addEventListener('foo', (evt) => {
+                    const div = this.template.querySelector('div');
+                    div.click();
+                });
+            }
+
+            onDivClick(evt) {
+                expect(evt.target).toBe(this.template.querySelector('div'));
+            }
+
+            render() {
+                return html;
+            }
+        }
+
+        const elm = createElement('x-add-event-listener', { is: MyComponent });
+        document.body.appendChild(elm);
+        elm.shadowRoot.querySelector('div').dispatchEvent(new CustomEvent('foo', { bubbles: true, composed: true }))
+    });
 });
 
 describe('Removing events from shadowroot', () => {

packages/lwc-engine/src/framework/events.ts

@@ -9,7 +9,7 @@ import {
 } from "./dom/node";
 import { VM, OwnerKey, getCustomElementVM } from "./vm";
 import { ArraySplice, ArrayIndexOf, create, ArrayPush, isUndefined, isFunction, getOwnPropertyDescriptor, defineProperties, isTrue } from "./language";
-import { isRendering, vmBeingRendered, invokeEventListener, EventListenerContext, componentEventListenerType, invokeComponentCallback } from "./invoker";
+import { isRendering, vmBeingRendered, invokeEventListener, EventListenerContext, componentEventListenerType } from "./invoker";
 import { patchShadowDomTraversalMethods } from "./dom/traverse";
 
 interface WrappedListener extends EventListener {
@@ -32,6 +32,7 @@ const eventShadowDescriptors: PropertyDescriptorMap = {
             const currentTarget = this.currentTarget as HTMLElement;
             const originalTarget = eventTargetGetter.call(this);
             // Executing event listener on component, target is always currentTarget
+
             if (componentEventListenerType === EventListenerContext.COMPONENT_LISTENER) {
                 return patchShadowDomTraversalMethods(currentTarget);
             }
@@ -191,12 +192,7 @@ export function getWrappedTemplateListener(vm: VM, fn: EventListener): EventList
     return function handler(event: Event) {
         if (isValidEventForCustomElement(event)) {
             patchShadowDomEvent(vm, event);
-
-            // We do not want to call invoker/invokeEventListener because
-            // that method is for calling events added to the custom element from within.
-            // Instead, we can just call the component callback directly because the callback
-            // is guaranteed to not be attached directly to the root or component instance.
-            invokeComponentCallback(vm, fn, [event]);
+            invokeEventListener(vm, EventListenerContext.NATIVE_ELEMENT, fn, vm.component, event);
         }
     };
 }

packages/lwc-engine/src/framework/invoker.ts

@@ -122,6 +122,7 @@ export function invokeComponentRenderMethod(vm: VM): VNodes {
 export enum EventListenerContext {
     COMPONENT_LISTENER = 1,
     ROOT_LISTENER = 2,
+    NATIVE_ELEMENT = 3,
 }
 
 export let componentEventListenerType: EventListenerContext | null = null;