Using mat-select in a Custom Element (web component) opens options outside the shadow DOM

user_1242855 0
Viewed 578

When using a mat-select element in my custom element the options are shown outside the created shadow dom in HTML that means the options are not shown right below the select control.

As far as I figured out I need to set ViewEncapsulation to ShadowDom. Only this way my custom element worked in all browsers. So the solution to my problem should be using ShadowDom.

Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html',
  styleUrls: ['./survey.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

<mat-form-field #ff>
    <mat-select placeholder="Auswahl ERP System" [(ngModel)]="erpSystem">
        <mat-option *ngFor="let choice of erpSystemAuswahl" [value]="choice">
                {{choice}}
        </mat-option>
    </mat-select>
</mat-form-field>

I expect the options shown right with the select element. How to I change the behaviour of the options to be shown correctly?

custom-element angular-material angular
1 Answers

Elements use <slot> as the target for content projection, not ng-content, so when the options are being projected into the <mat-select> it cannot find anywhere to project them into and adds them directly after the </mat-select> instead.

Apart from asking the Angular Material team to add slots I'm not sure what you can do. I'm busy trying to add slots dynamically to material components using directives (not sure it will work)

user_14876360
Related