fix(engine): retarget to null instead of undefined (#850)

packages/lwc-engine/src/3rdparty/polymer/retarget.ts

@@ -11,7 +11,7 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
-export function retarget(refNode: Node, path: Node[]): EventTarget | undefined {
+export function retarget(refNode: Node, path: Node[]): EventTarget | null {
     // If ANCESTOR's root is not a shadow root or ANCESTOR's root is BASE's
     // shadow-including inclusive ancestor, return ANCESTOR.
     const refNodePath = pathComposer(refNode, true);
@@ -27,4 +27,5 @@ export function retarget(refNode: Node, path: Node[]): EventTarget | undefined {
             return ancestor;
         }
     }
+    return null;
 }

packages/lwc-engine/src/faux-shadow/__tests__/events.spec.ts

@@ -371,6 +371,54 @@ describe('events', () => {
                 expect(target).toBe(anchor);
             });
         });
+
+        it('should retarget events created manually', () => {
+            expect.assertions(3);
+            class Child extends LightningElement {
+                render() {
+                    return childHTML;
+                }
+                renderedCallback() {
+                    let domEvent;
+                    this.addEventListener("change", (e) => {
+                        domEvent = e;
+                        expect(e.target).toBe(this.template.host);
+                    });
+                    const event = document.createEvent("HTMLEvents");
+                    event.initEvent("change", false, true);
+                    this.dispatchEvent(event);
+                    expect(domEvent).toBe(event);
+                    expect(domEvent.target).toBe(null); // because the event is not composed
+                }
+            }
+
+            const childHTML = compileTemplate(`
+                <template></template>
+            `, {
+                modules: {
+                    'x-child': Child
+                }
+            });
+
+            class Root extends LightningElement {
+                render() {
+                    return rootHTML;
+                }
+            }
+
+            const rootHTML = compileTemplate(`
+                <template>
+                    <x-child></x-child>
+                </template>
+            `, {
+                modules: {
+                    'x-child': Child
+                }
+            });
+
+            const elm = createElement('x-root', { is: Root });
+            document.body.appendChild(elm);
+        });
     });
 
     describe('template listener', () => {

packages/lwc-engine/src/faux-shadow/events.ts

@@ -60,13 +60,13 @@ const EventPatchDescriptors: PropertyDescriptorMap = {
                 getShadowRoot(originalCurrentTarget as HTMLElement) :
                 originalCurrentTarget;
 
-            return retarget(currentTarget as Node, pathComposer(relatedTarget as Node, true)) as EventTarget;
+            return retarget(currentTarget as Node, pathComposer(relatedTarget as Node, true));
         },
         enumerable: true,
         configurable: true,
     },
     target: {
-        get(this: ComposableEvent): EventTarget {
+        get(this: ComposableEvent): EventTarget | null {
             const originalCurrentTarget: EventTarget = eventCurrentTargetGetter.call(this);
             const originalTarget: EventTarget = eventTargetGetter.call(this);
             const composedPath = pathComposer(originalTarget as Node, this.composed);
@@ -81,7 +81,7 @@ const EventPatchDescriptors: PropertyDescriptorMap = {
             const currentTarget = (eventContext === EventListenerContext.SHADOW_ROOT_LISTENER) ?
                 getShadowRoot(originalCurrentTarget as HTMLElement) :
                 originalCurrentTarget;
-            return retarget(currentTarget as Node, composedPath) as EventTarget;
+            return retarget(currentTarget as Node, composedPath);
         },
         enumerable: true,
         configurable: true,