Матовый диалог не отображается должным образом при использовании в пользовательских элементах

Я пытаюсь использовать mat-dialog в моем пользовательском элементе angular. Я отлично работаю в приложении angular, но не могу связать тему материала при создании пользовательского элемента.

Когда я проверяю код вне приложения angular, ни к одному классу cdk не привязан стиль. Кажется, все работает нормально при работе на сервере angular. Как включить необходимый CSS в настраиваемый элемент?

Мой файл app.module

@NgModule({
  [ ...
   MatFormFieldModule,
   MatIconModule,
   MatSelectModule,
   MatInputModule,
   MatDialogModule,
  ...
 ],
  providers: [ConnectBackendService],
  entryComponents: [AppComponent, PopupComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(AppComponent, { injector });
    customElements.define('my-element', <Function>el);
  }

 ngDoBootstrap() {}
}

и мой файл styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Мой диалог должен иметь абсолютное позиционирование, должен быть выровнен по центру окна и должен иметь фон. В настоящее время ничего из этого не применимо к диалоговому окну.