Невозможно выбрать стиль вложенного компонента angular 7

В моем старом стиле scss я использовал ng-deep для выбора стиля во вложенном компоненте, но после того, как я перешел с углового 5 на 7. Этот стиль больше не работает, я пытаюсь выяснить, почему, но я не видел никаких изменений или отмечает, что кроме ng-deep обесценивается. Что под капотом изменилось, что может быть причиной этого?

Я прочитал это https://blog.angular-university.io/angular-host-context/, и я думаю, что понимаю, как это работает, но я не могу связать их вместе, чтобы сформулировать, почему. Заранее спасибо.

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

бутстрап 4 + нгб-бутстрап 4.

index.html

<ngb-modal-window role="dialog" tabindex="-1" class="modal fade show d-block">
 <div role="document" class="modal-dialog">
  <div class="modal-content">
   <div _ngcontent-c5="" class="modal-body">
    <hello-world _ngcontent-c5="" _nghost-c6="">
     <div _ngcontent-c6="" class="target"></div>
    </hello-world></div>
    <div _ngcontent-c5="" class="modal-footer">
     <button _ngcontent-c5="" class="btn">Close</button>
    </div>
  </div>
 </div>
</ngb-modal-window>

index.scss

:ng-deep .modal-body {
 .target {
   width: 100px;
   height: 100px;
   background: red;
 }
}

После того, как я обновился до angular 7, приведенный выше код больше не работает. Вместо этого я должен написать свой код таким образом, чтобы получить доступ к ngb-modal.

index.scss

:ng-deep .modal { // select the top level style
 // index style
 // able to style modal
 // but unable to select the .target style
}

   // below style does not work
:host:ng-deep .modal-body { 
 .target {
   //style
 }
}