fix: cloneNode() default behavior should match spec (#1480)

salesforce · Aug 29, 2019 · 9a7f822 · 9a7f822
1 parent 8d6baab
commit 9a7f822
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/@lwc/synthetic-shadow/src/faux-shadow/node.ts b/packages/@lwc/synthetic-shadow/src/faux-shadow/node.ts
@@ -408,7 +408,6 @@ defineProperties(Node.prototype, {
     },
     cloneNode: {
         value(this: Node, deep?: boolean): Node {
-            deep = isUndefined(deep) || deep;
             if (isNodeShadowed(this) || isHostElement(this)) {
                 return cloneNodePatched.call(this, deep);
             }

diff --git a/packages/integration-karma/test/shadow-dom/Node-properties/Node.cloneNode.spec.js b/packages/integration-karma/test/shadow-dom/Node-properties/Node.cloneNode.spec.js
@@ -55,6 +55,35 @@ describe('Node.cloneNode', () => {
         });
     });
 
+    describe('deep=undefined', () => {
+        it('should not clone shadow tree', () => {
+            const elm = createElement('x-slotted', { is: Slotted });
+            document.body.appendChild(elm);
+
+            const clone = elm.cloneNode();
+            expect(clone.childNodes.length).toBe(0);
+            expect(clone.outerHTML).toBe('<x-slotted></x-slotted>');
+        });
+
+        it('should not clone slotted content', () => {
+            const elm = createElement('x-slotted', { is: Slotted });
+            document.body.appendChild(elm);
+
+            const clone = elm.shadowRoot.querySelector('x-container').cloneNode();
+            expect(clone.childNodes.length).toBe(0);
+            expect(clone.outerHTML).toBe('<x-container></x-container>');
+        });
+
+        it('should not clone children of parent node with vanilla html', () => {
+            const table = document.createElement('table');
+            table.innerHTML = '<tr><th>Cat</th></tr><tr><th>Dog</th></tr>';
+            document.body.appendChild(table);
+            const clone = table.cloneNode();
+            expect(clone.childNodes.length).toBe(0);
+            expect(clone.outerHTML).toBe('<table></table>');
+        });
+    });
+
     describe('deep=true', () => {
         it('should not clone shadow tree', () => {
             const elm = createElement('x-slotted', { is: Slotted });
@@ -95,5 +124,16 @@ describe('Node.cloneNode', () => {
             expect(clone.childNodes.length).toBe(0);
             expect(clone.outerHTML).toBe('<x-container></x-container>');
         });
+
+        it('should clone children of parent node with vanilla html', () => {
+            const table = document.createElement('table');
+            table.innerHTML = '<tbody><tr><th>Cat</th></tr><tr><th>Dog</th></tr></tbody>';
+            document.body.appendChild(table);
+            const clone = table.cloneNode(true);
+            expect(clone.childNodes.length).toBe(1);
+            expect(clone.outerHTML).toBe(
+                '<table><tbody><tr><th>Cat</th></tr><tr><th>Dog</th></tr></tbody></table>'
+            );
+        });
     });
 });