Say I have a DOM tree like so:
<component1>
<component2>
<div>
<component3>
<div>
<div>
<div>
<div>
<component4> Can a style be applied here using ng-deep?</component4>
</div>
</div>
</div>
</div>
</component3>
</div>
</component2>
</component1>
Is it possible to apply a style from a parent component (component1) on to the deeply nested 'component4'. Assuming all components are encapsulated..
Edit: I'm very aware this is not ideal in many ways, but question stands?!
Yes, it is.
Basically, using ng-deep will break the shadow DOM, which will apply the css to every component being into it.
Meaning the following code added inside the component1.scss will change the background color of the <component4>
:host &::ng-deep component4 {
background-color: blue;
}
As you said this is not ideal in many ways and I cannot recommend you to use ::ng-deep since this is deprecated, please do use encapsulation instead