Digamos que tengo un árbol DOM así:
<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>¿Es posible aplicar un estilo de un componente principal (componente 1) al 'componente 4' profundamente anidado? Asumiendo que todos los componentes están encapsulados...
Editar: soy muy consciente de que esto no es ideal en muchos sentidos, ¡¿pero la pregunta sigue en pie?!
Sí, lo es.
Básicamente, usar ng-deep romperá el shadow DOM, que aplicará el css a cada componente que esté en él.
Lo que significa que el siguiente código agregado dentro del component1.scss cambiará el color de fondo del <component4>
:host &::ng-deep component4 { background-color: blue; } Como dijiste, esto no es ideal en muchos sentidos y no puedo recomendarte que uses ::ng-deep ya que está en desuso, usa encapsulación en su lugar