Components: mat-autocomplete-panel not styling with classes inherited from mat-autocomplete

[JaimeStill]

Bug, feature request, or proposal:

Bug and Documentation Clarification - Adding a class to mat-autocomplete applies the class to the mat-autocomplete-panel, but any defined styles are not applied. Would like to see an example in the documentation for matAutocomplete - classList.

What is the expected behavior?

Classes added to mat-autocomplete-panel should be styled appropriately.

What is the current behavior?

Classes are applied to mat-autocomplete-panel from mat-autocomplete, but styles are not applied.

What are the steps to reproduce?

<mat-form-field floatLabel="never">
  <mat-label>Filter Items</mat-label>
  <input matInput [matAutocomplete]="auto" #filter>
  <mat-autocomplete #auto="matAutocomplete" class="extended">
    <mat-option *ngFor="let i of service.items$ | async" [value]="i">{{i}}</mat-option>
  </mat-autocomplete>
</mat-form-field>

.mat-autocomplete-panel.extended {
  max-height: 512px; // double default max-height
}

StackBlitz Example

What is the use-case or motivation for changing an existing behavior?

Styling the overlay panel for matAutocomplete should be clarified in the documentation in the event that the above means of doing so is wrong.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular: 6.0.1
@angular/material: 6.0.1

[josephperrott]

Closing as from looking at your stackblitz reproduction, it looks like the issue is that your components css styling does not actually apply to the autocomplete.

Since your component is using ViewEncapsulation.Emulated your css rule has an additional element attribute selector added to it for the component which causes it to not match the autocomplete panel. You should be able to either use ViewEncapsulation.None or you can use ::ng-deep until its removal from Angular (deprecation note)

[JaimeStill]

@josephperrott, can the best practice usage of classList in MatAutocomplete be clarified then?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}