Cfrgtkky

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

 }

}