Cannot select nested component style angular 7

Question

In my old scss style, i used ng-deep to select style in the nested component but after I moved from angular 5 to 7. This style does not work any longer, I try to find out why but I didn't see any changes, or notes on that except the ng-deep is depreciate. What under the hood which has changed that could cause this?

I read this https://blog.angular-university.io/angular-host-context/, and I think I understand how it works but I can't put the two together to formulate why. Thanks in advance.

I want to use the style encapsulation, to avoid styles leak to other component.

bootstrap 4 + ngb-bootstrap 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;
 }
}

After I updated to angular 7, the above code doesn't work any longer. Instead I have to write my code this way to get access to 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
 }
}