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__/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 } from "./shadow-root";
 import { addCustomElementEventListener, removeCustomElementEventListener } from "./events";
 
 function addEventListenerPatchedValue(this: EventTarget, type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
@@ -14,6 +14,10 @@ function attachShadowGetter(this: HTMLElement, options: ShadowRootInit): ShadowR
     return attachShadow(this, options);
 }
 
+function getShadowRootPatchedValue(this: HTMLElement) {
+    return getShadowRoot(this);
+}
+
 const CustomElementPatchDescriptors: PropertyDescriptorMap = {
     attachShadow: {
         value: attachShadowGetter,
@@ -31,6 +35,11 @@ const CustomElementPatchDescriptors: PropertyDescriptorMap = {
         configurable: true,
         enumerable: true,
     },
+    shadowRoot: {
+        value: getShadowRootPatchedValue,
+        configurable: true,
+        enumerable: true,
+    }
 };
 
 export function patchCustomElement(elm: HTMLElement) {

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

@@ -7,8 +7,7 @@ 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";
 
@@ -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,

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,

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

@@ -1,14 +1,13 @@
 import assert from "../shared/assert";
 import { create, assign, isUndefined, getOwnPropertyDescriptor, ArrayReduce, isNull } from "../shared/language";
 import { addShadowRootEventListener, removeShadowRootEventListener } from "./events";
-import { shadowRootQuerySelector, shadowRootQuerySelectorAll, shadowRootChildNodes, isNodeOwnedBy, patchShadowDomTraversalMethods } from "./traverse";
+import { shadowRootQuerySelector, shadowRootQuerySelectorAll, shadowRootChildNodes, isNodeOwnedBy } from "./traverse";
 import { getInternalField, setInternalField, createFieldName } from "../shared/fields";
 import { getInnerHTML } from "../3rdparty/polymer/inner-html";
 import { getTextContent } from "../3rdparty/polymer/text-content";
 import { compareDocumentPosition, DOCUMENT_POSITION_CONTAINED_BY } from "./node";
 // it is ok to import from the polyfill since they always go hand-to-hand anyways.
 import { ElementPrototypeAriaPropertyNames } from "../polyfills/aria-properties/polyfill";
-import { unwrap } from "./traverse-membrane";
 import { DocumentPrototypeActiveElement } from "./document";
 
 let ArtificialShadowRootPrototype;
@@ -115,7 +114,7 @@ function activeElementGetter(this: ShadowRoot): Element | null {
     // activeElement must be child of the host and owned by it
     // TODO: what happen with delegatesFocus is true for a child component?
     return (compareDocumentPosition.call(host, activeElement) & DOCUMENT_POSITION_CONTAINED_BY) !== 0 &&
-        isNodeOwnedBy(host, activeElement) ? patchShadowDomTraversalMethods(activeElement) : null;
+        isNodeOwnedBy(host, activeElement) ? activeElement : null;
 }
 
 function hostGetter(this: ShadowRoot): HTMLElement {
@@ -203,7 +202,6 @@ const ArtificialShadowRootDescriptors: PropertyDescriptorMap = {
     compareDocumentPosition: {
         value(this: ShadowRoot, otherNode: Node): number {
             // this API might be called with proxies
-            otherNode = unwrap(otherNode);
             const host = getHost(this);
             if (this === otherNode) {
                 // it is the root itself
@@ -226,7 +224,6 @@ const ArtificialShadowRootDescriptors: PropertyDescriptorMap = {
     contains: {
         value(this: ShadowRoot, otherNode: Node): boolean {
             // this API might be called with proxies
-            otherNode = unwrap(otherNode);
             const host = getHost(this);
             // must be child of the host and owned by it.
             return (compareDocumentPosition.call(host, otherNode) & DOCUMENT_POSITION_CONTAINED_BY) !== 0 &&