feat(engine): dom patching

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

@@ -111,27 +111,4 @@ describe('wrapped iframe window', () => {
             expect(contentWindow.blur).toHaveBeenCalled();
         });
     });
-
-    describe('unwrapping', () => {
-        it('should return original object', () => {
-            const myComponentTmpl = compileTemplate(`
-                <template>
-                    <iframe src="https://salesforce.com"></iframe>
-                </template>
-            `);
-            class MyComponent extends LightningElement {
-                render() {
-                    return myComponentTmpl;
-                }
-            }
-
-            const elm = createElement('x-foo', { is: MyComponent });
-            document.body.appendChild(elm);
-
-            const nativeIframeContentWindow = document.querySelector('iframe').contentWindow;
-            const wrappedIframe = getHostShadowRoot(elm).querySelector('iframe'); // will return monkey patched contentWindow
-            const contentWindowGetter = Object.getOwnPropertyDescriptor(HTMLIFrameElement.prototype, 'contentWindow').get;
-            expect(nativeIframeContentWindow === contentWindowGetter.call(wrappedIframe)).toBe(true);
-        });
-    });
 });

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/__tests__/traverse.spec.ts

@@ -646,7 +646,7 @@ describe('#childNodes', () => {
         expect(() => {
             const child = getHostShadowRoot(elm).querySelector('div');
             const childNodes = child.childNodes;
-        }).toLogWarning(`childNodes on [object HTMLDivElement] returns a live NodeList which is not stable. Use querySelectorAll instead.`);
+        }).toLogWarning(`Discouraged access to property 'childNodes' on 'Node': It returns a live NodeList and should not be relied upon. Instead, use 'querySelectorAll' which returns a static NodeList.`);
     });
 
     it('should return correct elements for custom elements when no children present', () => {

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

@@ -1,5 +1,5 @@
 import { defineProperties } from "../shared/language";
-import { attachShadow } 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,10 +10,14 @@ 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);
 }
 
+function shadowRootGetter(this: HTMLElement) {
+    return getShadowRoot(this);
+}
+
 const CustomElementPatchDescriptors: PropertyDescriptorMap = {
     attachShadow: {
         value: attachShadowGetter,
@@ -31,6 +35,11 @@ const CustomElementPatchDescriptors: PropertyDescriptorMap = {
         configurable: true,
         enumerable: true,
     },
+    shadowRoot: {
+        get: shadowRootGetter,
+        configurable: true,
+        enumerable: true,
+    }
 };
 
 export function patchCustomElement(elm: HTMLElement) {

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

@@ -7,10 +7,9 @@ import {
     getRootNode,
     parentNodeGetter,
 } from "./node";
-import { ArraySlice, ArraySplice, ArrayIndexOf, create, ArrayPush, isUndefined, isFunction, getOwnPropertyDescriptor, defineProperties, isNull, toString, forEach, defineProperty, isFalse } from "../shared/language";
-import { patchShadowDomTraversalMethods } from "./traverse";
+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;
@@ -33,18 +32,6 @@ const eventCurrentTargetGetter: (this: Event) => Element | null = getOwnProperty
 const GET_ROOT_NODE_CONFIG_FALSE = { composed: false };
 
 const EventPatchDescriptors: PropertyDescriptorMap = {
-    currentTarget: {
-        get(this: Event): EventTarget | null {
-            const currentTarget: EventTarget = eventCurrentTargetGetter.call(this);
-            if (isNull(currentTarget) || isUndefined(getNodeOwnerKey(currentTarget as Node))) {
-                // event is already beyond the boundaries of our controlled shadow roots
-                return currentTarget;
-            }
-            return patchShadowDomTraversalMethods(currentTarget as Element);
-        },
-        enumerable: true,
-        configurable: true,
-    },
     target: {
         get(this: Event): EventTarget {
             const currentTarget: EventTarget = eventCurrentTargetGetter.call(this);
@@ -71,7 +58,7 @@ const EventPatchDescriptors: PropertyDescriptorMap = {
             const eventContext = eventToContextMap.get(this);
             // Executing event listener on component, target is always currentTarget
             if (eventContext === EventListenerContext.CUSTOM_ELEMENT_LISTENER) {
-                return patchShadowDomTraversalMethods(currentTarget as Element);
+                return currentTarget as Element;
             }
             const currentTargetRootNode = getRootNode.call(currentTarget, GET_ROOT_NODE_CONFIG_FALSE); // x-child
 
@@ -160,10 +147,7 @@ const EventPatchDescriptors: PropertyDescriptorMap = {
              * while the event is patched because the component is listening for it internally
              * via this.addEventListener('click') in constructor or something similar
              */
-            if (isUndefined(getNodeOwnerKey(closestTarget as Node))) {
-                return closestTarget;
-            }
-            return patchShadowDomTraversalMethods(closestTarget as Element);
+            return closestTarget as Element;
         },
         enumerable: true,
         configurable: true,
@@ -194,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
     }
@@ -373,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
@@ -390,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);

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

@@ -3,10 +3,6 @@ export { patchEvent } from "./events";
 
 export { patchCustomElement } from "./custom-element";
 
-export {
-    unwrap as getRawNode,
-} from "./traverse-membrane";
-
 export {
     lightDomQuerySelectorAll,
     lightDomQuerySelector,