Is it possible to update the CSS of a child component from its parent without changing the encapsulation view?
Check out this demo for reference.
app.component.ts
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
hello.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1 class='test'>Hello {{name}}!</h1>`,
styles: [`.test { font-family: Lato;color:red; }`]
})
export class HelloComponent {
@Input() name: string;
}
app.component.css
:host ::ng-deep .test{
color:green;
}
p {
font-family: Lato;
}
Despite attempting to override the style in chrome toolbar, the child component still displays color:red.