angular - Styling a child component differently in another component -

i trying style alert box (from bootstrap) [which component] different when shows in 1 of components. other places use default styling.

i able achieve want using:

encapsulation: viewencapsulation.none in parent component. want avoid , learn using best practice.

can shed light of how can achieved without modifying encapsulations ?

in posts users mention use :host , ::content css properties far unable make use out of them.

i believe common scenario , there should way it.

you can use /deep/ in parent like

:host /deep/ some-grand-child {   color: blue; } 

to make selectors cross component boundaries without setting viewencapsulation none.