стили для ngbmodal при использовании ShadowDom

Question

У меня есть app.component.ts с ViewEncapsulation.shadowDom. Если у дочернего компонента есть окно ngbModal, которое добавляется к телу (по умолчанию), стили не применяются должным образом.

ngbModal добавление к телу

Если я пытаюсь добавить это к контейнеру, выдавшему ошибку JS из-за shadowDom Error: The specified modal container "#modalPlaceHolder" was not found in the DOM.

ngbМодальное добавление при попытке добавить к контейнеру

Что может быть не так?

Я не могу добавить s css к заголовку тега, ссылаясь на стили в англ. json

Как лучше всего решить эту проблему?

Answer 1

Чтобы получить элемент shadow dom вашего идентификатора, сначала вам нужно получить свою тень Root, которая app-root

document.getElementsByTagName('app-root')[0].shadowRoot.getElementById('modalPlaceHolder')

Должна быть такой

open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', container: document.getElementsByTagName('app-root')[0].shadowRoot.getElementById('modalPlaceHolder')}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }