Merge pull request #1092 from Polymer/fix-queryAssignedNodes

Fixes queryAssignedNodes when querying for nodes on browsers that do …

CHANGELOG.md

@@ -17,6 +17,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 <!-- ### Removed -->
 <!-- ### Fixed -->
 
+## Unreleased
+
+### Fixed
+* Fixes an issue with `queryAssignedNodes` when applying a selector on a slot that included text nodes on older browsers not supporting Element.matches [#1088](https://github.com/Polymer/lit-element/issues/1088).
+
 ## [2.4.0] - 2020-08-19
 
 ### Changed

src/lib/decorators.ts

@@ -465,9 +465,10 @@ export function queryAssignedNodes(
         if (nodes && selector) {
           nodes = nodes.filter(
               (node) => node.nodeType === Node.ELEMENT_NODE &&
-                      (node as Element).matches ?
-                  (node as Element).matches(selector) :
-                  legacyMatches.call(node as Element, selector));
+                  // tslint:disable-next-line:no-any testing existence on older browsers
+                  ((node as any).matches ?
+                       (node as Element).matches(selector) :
+                       legacyMatches.call(node as Element, selector)));
         }
         return nodes;
       },

src/test/lib/decorators_test.ts

@@ -524,6 +524,44 @@ suite('decorators', () => {
       flush();
       assert.deepEqual(c.assignedNodesEl.footerAssignedItems, []);
     });
+
+    test(
+        'returns assignedNodes for slot that contains text nodes filtered by selector when Element.matches does not exist',
+        async () => {
+          const descriptor =
+              Object.getOwnPropertyDescriptor(Element.prototype, 'matches');
+          let definedMatches = true;
+          try {
+            Object.defineProperty(Element.prototype, 'matches', {
+              value: undefined,
+              configurable: true,
+            });
+          } catch (e) {
+            definedMatches = false;
+          }
+          const c = new C();
+          container.appendChild(c);
+          await c.updateComplete;
+          await c.assignedNodesEl.updateComplete;
+          assert.deepEqual(c.assignedNodesEl.footerAssignedItems, []);
+          const child1 = document.createElement('div');
+          const child2 = document.createElement('div');
+          const text1 = document.createTextNode('');
+          const text2 = document.createTextNode('');
+          child2.classList.add('item');
+          c.appendChild(child1);
+          c.appendChild(text1);
+          c.appendChild(child2);
+          c.appendChild(text2);
+          flush();
+          assert.deepEqual(c.assignedNodesEl.footerAssignedItems, [child2]);
+          c.removeChild(child2);
+          flush();
+          assert.deepEqual(c.assignedNodesEl.footerAssignedItems, []);
+          if (definedMatches && descriptor !== undefined) {
+            Object.defineProperty(Element.prototype, 'matches', descriptor);
+          }
+        });
   });
 
   suite('@queryAsync', () => {