fix: issue with Node.textContent returning text in comment nodes (#1461)

* fix: issue with Node.textContent returning text in comment nodes

* fix: also patch shadowRoot.textContent

* wip: use innerHTML instead of dom api

* wip: minor perf optimization

packages/@lwc/synthetic-shadow/src/3rdparty/polymer/text-content.ts

@@ -17,15 +17,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 // This code is inspired by Polymer ShadyDOM Polyfill
 
 import { getFilteredChildNodes } from '../../faux-shadow/traverse';
-import { ELEMENT_NODE } from '../../env/node';
+import { ELEMENT_NODE, COMMENT_NODE } from '../../env/node';
 
 export function getTextContent(node: Node): string {
     switch (node.nodeType) {
         case ELEMENT_NODE: {
             const childNodes = getFilteredChildNodes(node);
             let content = '';
             for (let i = 0, len = childNodes.length; i < len; i += 1) {
-                content += getTextContent(childNodes[i]);
+                const currentNode = childNodes[i];
+
+                if (currentNode.nodeType !== COMMENT_NODE) {
+                    content += getTextContent(currentNode);
+                }
             }
             return content;
         }

packages/@lwc/synthetic-shadow/src/faux-shadow/shadow-root.ts

@@ -37,6 +37,7 @@ import {
     insertBefore,
     replaceChild,
     appendChild,
+    COMMENT_NODE,
 } from '../env/node';
 import { createStaticHTMLCollection } from '../shared/static-html-collection';
 import { getOuterHTML } from '../3rdparty/polymer/outer-html';
@@ -476,7 +477,11 @@ const NodePatchDescriptors = {
             const childNodes = getInternalChildNodes(this);
             let textContent = '';
             for (let i = 0, len = childNodes.length; i < len; i += 1) {
-                textContent += getTextContent(childNodes[i]);
+                const currentNode = childNodes[i];
+
+                if (currentNode.nodeType !== COMMENT_NODE) {
+                    textContent += getTextContent(currentNode);
+                }
             }
             return textContent;
         },

packages/integration-karma/test/polyfills/text-content/index.spec.js

@@ -0,0 +1,49 @@
+import { createElement } from 'lwc';
+import XTest from 'x/test';
+
+describe('Node.textContent', () => {
+    it('should not return comment text when Node.nodeType is ELEMENT_NODE', () => {
+        const elm = document.createElement('div');
+        elm.innerHTML =
+            '<div>' +
+            '<!-- Some comment -->' +
+            'text content' +
+            '<!-- Some other comment -->' +
+            '</div>';
+
+        expect(elm.textContent).toBe('text content');
+    });
+
+    it('should not return comment text from 2nd level ELEMENT_NODE', () => {
+        const elm = document.createElement('div');
+
+        elm.innerHTML =
+            '<div>' +
+            '<!-- Some comment -->' +
+            'text content' +
+            '<div>' +
+            '<!-- 2nd level comment -->' +
+            '2nd level text' +
+            '</div>' +
+            '<!-- Some other comment -->' +
+            '</div>';
+
+        expect(elm.textContent).toBe('text content2nd level text');
+    });
+
+    it('should return comment text when Node.nodeType is COMMENT_NODE', () => {
+        const elm = document.createComment('Some comment');
+
+        expect(elm.textContent).toBe('Some comment');
+    });
+
+    it('should not return comment text from the shadowRoot', () => {
+        const elm = createElement('x-parent', { is: XTest });
+        document.body.appendChild(elm);
+
+        // since we remove the comments from the template, we need to add it manually
+        elm.shadowRoot.appendChild(document.createComment('Some comment'));
+
+        expect(elm.shadowRoot.textContent).toBe('text content');
+    });
+});

packages/integration-karma/test/polyfills/text-content/x/test/test.html

@@ -0,0 +1,4 @@
+<template>
+    <!-- This is a comment, it should not be part of the textContent -->
+    text content
+</template>

packages/integration-karma/test/polyfills/text-content/x/test/test.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class Test extends LightningElement {}