Fix queryAssignedNodes when unnamed slot is not first

Fixes #1002
lit · May 20, 2020 · b3f4dcc · b3f4dcc
1 parent 7a93f35
commit b3f4dcc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/src/lib/decorators.ts b/src/lib/decorators.ts
@@ -417,7 +417,8 @@ export function queryAssignedNodes(
           name?: PropertyKey): any => {
     const descriptor = {
       get(this: LitElement) {
-        const selector = `slot${slotName ? `[name=${slotName}]` : ''}`;
+        const selector =
+            `slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
         const slot = this.renderRoot.querySelector(selector);
         return slot && (slot as HTMLSlotElement).assignedNodes({flatten});
       },

diff --git a/src/test/lib/decorators_test.ts b/src/test/lib/decorators_test.ts
@@ -86,7 +86,7 @@ suite('decorators', () => {
   suite('@customElement', () => {
     test('defines an element', () => {
       const tagName = generateElementName();
-      @customElement(tagName as keyof HTMLElementTagNameMap)
+      @customElement(tagName)
       class C0 extends HTMLElement {
       }
       const DefinedC = customElements.get(tagName);
@@ -324,7 +324,7 @@ suite('decorators', () => {
   });
 
   suite('@query', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @query('#blah') blah?: HTMLDivElement;
 
@@ -357,7 +357,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAll', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @queryAll('div') divs!: NodeList;
 
@@ -393,7 +393,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAssignedNodes', () => {
-    @customElement('assigned-nodes-el' as keyof HTMLElementTagNameMap)
+    @customElement('assigned-nodes-el')
     class D extends LitElement {
       @queryAssignedNodes() defaultAssigned!: Node[];
 
@@ -408,16 +408,33 @@ suite('decorators', () => {
       }
     }
 
+    @customElement('assigned-nodes-el-2')
+    class E extends LitElement {
+      @queryAssignedNodes() defaultAssigned!: Node[];
+
+      @queryAssignedNodes('header') headerAssigned!: Node[];
+
+      render() {
+        return html`
+          <slot name="header"></slot>
+          <slot></slot>
+        `;
+      }
+    }
+
     // Note, there are 2 elements here so that the `flatten` option of
     // the decorator can be tested.
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
-      @query('div') div!: HTMLDivElement;
+      @query('#div1') div!: HTMLDivElement;
+      @query('#div2') div2!: HTMLDivElement;
       @query('assigned-nodes-el') assignedNodesEl!: D;
+      @query('assigned-nodes-el-2') assignedNodesEl2!: E;
 
       render() {
         return html`
-          <assigned-nodes-el><div>A</div><slot slot="footer"></slot></assigned-nodes-el>
+          <assigned-nodes-el><div id="div1">A</div><slot slot="footer"></slot></assigned-nodes-el>
+          <assigned-nodes-el-2><div id="div2">B</div></assigned-nodes-el-2>
         `;
       }
     }
@@ -439,6 +456,16 @@ suite('decorators', () => {
       assert.deepEqual(c.assignedNodesEl.defaultAssigned, [c.div]);
     });
 
+    test(
+        'returns assignedNodes for unnamed slot that is not first slot',
+        async () => {
+          const c = new C();
+          container.appendChild(c);
+          await c.updateComplete;
+          await c.assignedNodesEl.updateComplete;
+          assert.deepEqual(c.assignedNodesEl2.defaultAssigned, [c.div2]);
+        });
+
     test('returns flattened assignedNodes for slot', async () => {
       const c = new C();
       container.appendChild(c);
@@ -461,7 +488,7 @@ suite('decorators', () => {
   });
 
   suite('@queryAsync', () => {
-    @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+    @customElement(generateElementName())
     class C extends LitElement {
       @queryAsync('#blah') blah!: Promise<HTMLDivElement>;
 
@@ -504,7 +531,7 @@ suite('decorators', () => {
       if (!supportsOptions) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         eventPhase?: number;
 
@@ -532,7 +559,7 @@ suite('decorators', () => {
       if (!supportsOptions) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         clicked = 0;
 
@@ -561,7 +588,7 @@ suite('decorators', () => {
       if (!supportsPassive) {
         this.skip();
       }
-      @customElement(generateElementName() as keyof HTMLElementTagNameMap)
+      @customElement(generateElementName())
       class C extends LitElement {
         defaultPrevented?: boolean;