fix(synthetic-shadow): qunit has issues when document object is patch…

…ed (#1625)
salesforce · Nov 26, 2019 · 06d459e · 06d459e
1 parent 1701aa2
commit 06d459e
Showing 1 changed file with 27 additions and 21 deletions.
diff --git a/packages/@lwc/synthetic-shadow/src/polyfills/HTMLSlotElement/polyfill.ts b/packages/@lwc/synthetic-shadow/src/polyfills/HTMLSlotElement/polyfill.ts
@@ -5,9 +5,9 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 
-import { ArraySlice, setPrototypeOf, StringCharCodeAt } from '@lwc/shared';
+import { ArraySlice, setPrototypeOf, StringCharCodeAt, defineProperty } from '@lwc/shared';
 
-const { createElement } = document;
+const { createElement } = Document.prototype;
 
 const CHAR_S = 115;
 const CHAR_L = 108;
@@ -23,24 +23,30 @@ export default function apply() {
     setPrototypeOf(HTMLSlotElement.prototype, HTMLElement.prototype);
     (Window as any).prototype.HTMLSlotElement = HTMLSlotElement;
     // IE11 doesn't have HTMLSlotElement, in which case we
-    // need to patch document.createElement to remap `slot`
+    // need to patch Document.prototype.createElement to remap `slot`
     // elements to the right prototype
-    document.createElement = function(name) {
-        const elm = createElement.apply(this, ArraySlice.call(arguments) as [
-            string,
-            ElementCreationOptions?
-        ]);
-        if (
-            name.length === 4 &&
-            StringCharCodeAt.call(name, 0) === CHAR_S &&
-            StringCharCodeAt.call(name, 1) === CHAR_L &&
-            StringCharCodeAt.call(name, 2) === CHAR_O &&
-            StringCharCodeAt.call(name, 3) === CHAR_T
-        ) {
-            // the new element is the `slot`, resetting the proto chain
-            // the new newly created global HTMLSlotElement.prototype
-            setPrototypeOf(elm, HTMLSlotElement.prototype);
-        }
-        return elm;
-    };
+    defineProperty(Document.prototype, 'createElement', {
+        value: function<K extends keyof HTMLElementTagNameMap>(
+            this: Document,
+            tagName: K,
+            _options?: ElementCreationOptions
+        ): HTMLElementTagNameMap[K] | HTMLElement {
+            const elm = createElement.apply(this, ArraySlice.call(arguments) as [
+                string,
+                ElementCreationOptions?
+            ]);
+            if (
+                tagName.length === 4 &&
+                StringCharCodeAt.call(tagName, 0) === CHAR_S &&
+                StringCharCodeAt.call(tagName, 1) === CHAR_L &&
+                StringCharCodeAt.call(tagName, 2) === CHAR_O &&
+                StringCharCodeAt.call(tagName, 3) === CHAR_T
+            ) {
+                // the new element is the `slot`, resetting the proto chain
+                // the new newly created global HTMLSlotElement.prototype
+                setPrototypeOf(elm, HTMLSlotElement.prototype);
+            }
+            return elm;
+        },
+    });
 }