fix(engine): exposing host

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

@@ -4,7 +4,23 @@ import { getHostShadowRoot } from '../../framework/html-element';
 
 describe('root', () => {
     describe('integration', () => {
-        it.skip('should support this.template.host', () => {});
+        it('should support template.host', () => {
+            const html = compileTemplate(`
+                <template></template>
+            `);
+            class Parent extends LightningElement {
+                getHost() {
+                    return this.template.host;
+                }
+                render() {
+                    return html;
+                }
+            }
+            Parent.publicMethods = ['getHost'];
+            const elm = createElement('x-parent', { is: Parent });
+            expect(elm.getHost()).toBe(elm);
+            expect(elm.shadowRoot.host).toBe(elm);
+        });
 
         it('should support this.template.mode', () => {
             class MyComponent extends LightningElement {}

packages/lwc-engine/src/faux-shadow/custom-element.ts

@@ -1,5 +1,5 @@
 import { defineProperties } from "../shared/language";
-import { attachShadow, getShadowRoot } from "./shadow-root";
+import { attachShadow, getShadowRoot, SyntheticShadowRoot } from "./shadow-root";
 import { addCustomElementEventListener, removeCustomElementEventListener } from "./events";
 
 function addEventListenerPatchedValue(this: EventTarget, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
@@ -10,7 +10,7 @@ function removeEventListenerPatchedValue(this: EventTarget, type: string, listen
     removeCustomElementEventListener(this as HTMLElement, type, listener, options);
 }
 
-function attachShadowGetter(this: HTMLElement, options: ShadowRootInit): ShadowRoot {
+function attachShadowGetter(this: HTMLElement, options: ShadowRootInit): SyntheticShadowRoot {
     return attachShadow(this, options);
 }
 

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

@@ -7,12 +7,14 @@ const {
     createElementNS,
     createTextNode,
     createComment,
-} = document;
+    elementsFromPoint,
+} = Document.prototype;
 
 export {
     createElement,
     createElementNS,
     createTextNode,
     createComment,
     DocumentPrototypeActiveElement,
+    elementsFromPoint,
 };

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

@@ -9,7 +9,7 @@ import {
 } from "./node";
 import { ArraySlice, ArraySplice, ArrayIndexOf, create, ArrayPush, isUndefined, isFunction, getOwnPropertyDescriptor, defineProperties, toString, forEach, defineProperty, isFalse } from "../shared/language";
 import { compareDocumentPosition, DOCUMENT_POSITION_CONTAINED_BY, getNodeOwnerKey, getNodeKey } from "./node";
-import { getHost } from "./shadow-root";
+import { getHost, SyntheticShadowRoot } from "./shadow-root";
 
 interface WrappedListener extends EventListener {
     placement: EventListenerContext;
@@ -178,7 +178,7 @@ function getEventMap(elm: HTMLElement): ListenerMap {
 
 const shadowRootEventListenerMap: WeakMap<EventListener, WrappedListener> = new WeakMap();
 
-function getWrappedShadowRootListener(sr: ShadowRoot, listener: EventListener): WrappedListener {
+function getWrappedShadowRootListener(sr: SyntheticShadowRoot, listener: EventListener): WrappedListener {
     if (!isFunction(listener)) {
         throw new TypeError(); // avoiding problems with non-valid listeners
     }
@@ -357,7 +357,7 @@ export function removeCustomElementEventListener(elm: HTMLElement, type: string,
     detachDOMListener(elm, type, wrappedListener);
 }
 
-export function addShadowRootEventListener(sr: ShadowRoot, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+export function addShadowRootEventListener(sr: SyntheticShadowRoot, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
     if (process.env.NODE_ENV !== 'production') {
         assert.invariant(isFunction(listener), `Invalid second argument for this.template.addEventListener() in ${toString(sr)} for event "${type}". Expected an EventListener but received ${listener}.`);
         // TODO: issue #420
@@ -374,7 +374,7 @@ export function addShadowRootEventListener(sr: ShadowRoot, type: string, listene
     attachDOMListener(elm, type, wrappedListener);
 }
 
-export function removeShadowRootEventListener(sr: ShadowRoot, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+export function removeShadowRootEventListener(sr: SyntheticShadowRoot, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
     const elm = getHost(sr);
     const wrappedListener = getWrappedShadowRootListener(sr, listener);
     detachDOMListener(elm, type, wrappedListener);