如何使用Angular 6中的模拟封装更改子组件样式?

这是样品 demo

app.component.ts

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

您好,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;
}

:host ::ng-deep .test{
  color:green;
}

p {
  font-family: Lato;
}

我可以在chrome工具栏中看到,它试图覆盖样式,但子组件仍然显示颜色:红色。