Skip to content

Commit b3f4dcc

Browse files
committed
Fix queryAssignedNodes when unnamed slot is not first
Fixes #1002
1 parent 7a93f35 commit b3f4dcc

File tree

2 files changed

+40
-12
lines changed

2 files changed

+40
-12
lines changed

src/lib/decorators.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,8 @@ export function queryAssignedNodes(
417417
name?: PropertyKey): any => {
418418
const descriptor = {
419419
get(this: LitElement) {
420-
const selector = `slot${slotName ? `[name=${slotName}]` : ''}`;
420+
const selector =
421+
`slot${slotName ? `[name=${slotName}]` : ':not([name])'}`;
421422
const slot = this.renderRoot.querySelector(selector);
422423
return slot && (slot as HTMLSlotElement).assignedNodes({flatten});
423424
},

src/test/lib/decorators_test.ts

+38-11
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ suite('decorators', () => {
8686
suite('@customElement', () => {
8787
test('defines an element', () => {
8888
const tagName = generateElementName();
89-
@customElement(tagName as keyof HTMLElementTagNameMap)
89+
@customElement(tagName)
9090
class C0 extends HTMLElement {
9191
}
9292
const DefinedC = customElements.get(tagName);
@@ -324,7 +324,7 @@ suite('decorators', () => {
324324
});
325325

326326
suite('@query', () => {
327-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
327+
@customElement(generateElementName())
328328
class C extends LitElement {
329329
@query('#blah') blah?: HTMLDivElement;
330330

@@ -357,7 +357,7 @@ suite('decorators', () => {
357357
});
358358

359359
suite('@queryAll', () => {
360-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
360+
@customElement(generateElementName())
361361
class C extends LitElement {
362362
@queryAll('div') divs!: NodeList;
363363

@@ -393,7 +393,7 @@ suite('decorators', () => {
393393
});
394394

395395
suite('@queryAssignedNodes', () => {
396-
@customElement('assigned-nodes-el' as keyof HTMLElementTagNameMap)
396+
@customElement('assigned-nodes-el')
397397
class D extends LitElement {
398398
@queryAssignedNodes() defaultAssigned!: Node[];
399399

@@ -408,16 +408,33 @@ suite('decorators', () => {
408408
}
409409
}
410410

411+
@customElement('assigned-nodes-el-2')
412+
class E extends LitElement {
413+
@queryAssignedNodes() defaultAssigned!: Node[];
414+
415+
@queryAssignedNodes('header') headerAssigned!: Node[];
416+
417+
render() {
418+
return html`
419+
<slot name="header"></slot>
420+
<slot></slot>
421+
`;
422+
}
423+
}
424+
411425
// Note, there are 2 elements here so that the `flatten` option of
412426
// the decorator can be tested.
413-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
427+
@customElement(generateElementName())
414428
class C extends LitElement {
415-
@query('div') div!: HTMLDivElement;
429+
@query('#div1') div!: HTMLDivElement;
430+
@query('#div2') div2!: HTMLDivElement;
416431
@query('assigned-nodes-el') assignedNodesEl!: D;
432+
@query('assigned-nodes-el-2') assignedNodesEl2!: E;
417433

418434
render() {
419435
return html`
420-
<assigned-nodes-el><div>A</div><slot slot="footer"></slot></assigned-nodes-el>
436+
<assigned-nodes-el><div id="div1">A</div><slot slot="footer"></slot></assigned-nodes-el>
437+
<assigned-nodes-el-2><div id="div2">B</div></assigned-nodes-el-2>
421438
`;
422439
}
423440
}
@@ -439,6 +456,16 @@ suite('decorators', () => {
439456
assert.deepEqual(c.assignedNodesEl.defaultAssigned, [c.div]);
440457
});
441458

459+
test(
460+
'returns assignedNodes for unnamed slot that is not first slot',
461+
async () => {
462+
const c = new C();
463+
container.appendChild(c);
464+
await c.updateComplete;
465+
await c.assignedNodesEl.updateComplete;
466+
assert.deepEqual(c.assignedNodesEl2.defaultAssigned, [c.div2]);
467+
});
468+
442469
test('returns flattened assignedNodes for slot', async () => {
443470
const c = new C();
444471
container.appendChild(c);
@@ -461,7 +488,7 @@ suite('decorators', () => {
461488
});
462489

463490
suite('@queryAsync', () => {
464-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
491+
@customElement(generateElementName())
465492
class C extends LitElement {
466493
@queryAsync('#blah') blah!: Promise<HTMLDivElement>;
467494

@@ -504,7 +531,7 @@ suite('decorators', () => {
504531
if (!supportsOptions) {
505532
this.skip();
506533
}
507-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
534+
@customElement(generateElementName())
508535
class C extends LitElement {
509536
eventPhase?: number;
510537

@@ -532,7 +559,7 @@ suite('decorators', () => {
532559
if (!supportsOptions) {
533560
this.skip();
534561
}
535-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
562+
@customElement(generateElementName())
536563
class C extends LitElement {
537564
clicked = 0;
538565

@@ -561,7 +588,7 @@ suite('decorators', () => {
561588
if (!supportsPassive) {
562589
this.skip();
563590
}
564-
@customElement(generateElementName() as keyof HTMLElementTagNameMap)
591+
@customElement(generateElementName())
565592
class C extends LitElement {
566593
defaultPrevented?: boolean;
567594

0 commit comments

Comments
 (0)