Ensure that queryAssignedNodes always returns an array (#1980)

If the `<slot>` element isn't rendered, the decorator can return null
lit · Aug 20, 2021 · 018f652 · 018f652
1 parent 9745bba
commit 018f652
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/dirty-ducks-argue.md b/.changeset/dirty-ducks-argue.md
@@ -0,0 +1,5 @@
+---
+'@lit/reactive-element': patch
+---
+
+fix queryAssignedNodes returning null if slot is not found
diff --git a/packages/reactive-element/src/decorators/query-assigned-nodes.ts b/packages/reactive-element/src/decorators/query-assigned-nodes.ts
@@ -59,8 +59,8 @@ export function queryAssignedNodes(
           slotName ? `[name=${slotName}]` : ':not([name])'
         }`;
         const slot = this.renderRoot?.querySelector(slotSelector);
-        let nodes = (slot as HTMLSlotElement)?.assignedNodes({flatten});
-        if (nodes && selector) {
+        let nodes = (slot as HTMLSlotElement)?.assignedNodes({flatten}) ?? [];
+        if (selector) {
           nodes = nodes.filter(
             (node) =>
               node.nodeType === Node.ELEMENT_NODE &&

diff --git a/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts b/packages/reactive-element/src/test/decorators/queryAssignedNodes_test.ts
@@ -77,6 +77,7 @@ const flush =
     assignedNodesEl!: D;
     assignedNodesEl2!: E;
     assignedNodesEl3!: S;
+    @queryAssignedNodes() missingSlotAssignedNodes!: Node[];
 
     render() {
       return html`
@@ -225,4 +226,8 @@ const flush =
       Object.defineProperty(Element.prototype, 'matches', descriptor);
     }
   });
+
+  test('always returns an array, even if the slot is not rendered', () => {
+    assert.isArray(el.missingSlotAssignedNodes);
+  });
 });