fix(list): selection list option not picking up indirect desce… (#17514)

Fixes `mat-list-option` not picking up `mat-line` instances that aren't direct descendants.

Author: crisbeto

src/material/list/selection-list.spec.ts

@@ -40,6 +40,7 @@ describe('MatSelectionList without forms', () => {
           SelectionListWithOnlyOneOption,
           SelectionListWithIndirectChildOptions,
           SelectionListWithSelectedOptionAndValue,
+          SelectionListWithIndirectDescendantLines,
         ],
       });
 
@@ -603,6 +604,14 @@ describe('MatSelectionList without forms', () => {
       expect(listItemEl.componentInstance.value).toBe(componentFixture.componentInstance.itemValue);
     });
 
+    it('should pick up indirect descendant lines', () => {
+      const componentFixture = TestBed.createComponent(SelectionListWithIndirectDescendantLines);
+      componentFixture.detectChanges();
+
+      const option = componentFixture.nativeElement.querySelector('mat-list-option');
+      expect(option.classList).toContain('mat-2-line');
+    });
+
   });
 
   describe('with list option selected', () => {
@@ -1445,3 +1454,18 @@ class SelectionListWithIcon {
 class SelectionListWithIndirectChildOptions {
   @ViewChildren(MatListOption) optionInstances: QueryList<MatListOption>;
 }
+
+// Note the blank `ngSwitch` which we need in order to hit the bug that we're testing.
+@Component({
+  template: `
+  <mat-selection-list>
+    <mat-list-option>
+      <ng-container [ngSwitch]="true">
+        <h3 mat-line>Item</h3>
+        <p mat-line>Item description</p>
+      </ng-container>
+    </mat-list-option>
+  </mat-selection-list>`
+})
+class SelectionListWithIndirectDescendantLines {
+}

src/material/list/selection-list.ts

@@ -125,7 +125,7 @@ export class MatListOption extends _MatListOptionMixinBase implements AfterConte
 
   @ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;
   @ContentChild(MatListIconCssMatStyler) _icon: MatListIconCssMatStyler;
-  @ContentChildren(MatLine) _lines: QueryList<MatLine>;
+  @ContentChildren(MatLine, {descendants: true}) _lines: QueryList<MatLine>;
 
   /** DOM element containing the item's text. */
   @ViewChild('text') _text: ElementRef;