Использование mat-select в пользовательском элементе (веб-компонент) открывает параметры вне теневого DOM

Question

При использовании элемента mat-select в моем пользовательском элементе параметры отображаются вне созданной теневой области в HTML, что означает, что параметры не отображаются прямо под элементом управления select.

Насколько я понял, мне нужно установить ViewEncapsulation на ShadowDom. Только так мой пользовательский элемент работал во всех браузерах. Так что решением моей проблемы должно быть использование 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>

Я ожидаю, что параметры отображаются справа с элементом select. Как изменить поведение параметров, чтобы они отображались правильно?

Answer 1

Элементы используют в качестве цели для проекции контента, а не ng-content, поэтому, когда параметры проецируются в , он не может найти нигде для их проецирования и добавляет их непосредственно после вместо этого.

Помимо того, что я просил команду Angular Material добавить слоты, я не уверен, что вы можете сделать. Я занят динамическим добавлением слотов в материальные компоненты с помощью директив (не уверен, что это сработает)