понял о хосте, так это то, что если у меня есть дочерний компонент внутри родительского компонента, и мы хотим стилизовать дочерний компонент из родительского компонента, мы можем использовать: host. и: хост-контекст для наоборот. Пожалуйста, дайте мне знать, если это правильное использование хоста.

https://angular.io/docs/ts/latest/guide/component-styles.html

Когда я пытаюсь сделать то же самое в моем приложении, это не работает

Шаблон компонента приложения

  <div class ="top">
    <h1>
      Home Component
    </h1>
    <hr>
    <app-ngrx></app-ngrx>
    <router-outlet></router-outlet>
  <div>

Шаблон компонента ngrx

  <h3 class="mine">NGRX</h3>

<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>

<button (click)="reset()">Reset Counter</button>

Компонент приложения CSS

:host(.mine){
  color:red;
}

Это не похоже на работу Пожалуйста, помогите я не могу понять.

Я посмотрел на этот вопрос, но просто не смог разобраться

Angular 2: Как стилизовать хост-элемент компонента?

Обновлено после ответа @Gunter

В своем шаблоне app-ngrx я добавил

  <h3 class = "mine">NGRX</h3>

<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>

<button (click)="reset()">Reset Counter</button>

и в файле app-ngrx css я добавил

:host(.mine){
  color:red;
}

Но даже без добавления моего в компоненте приложения, как

<app-ngrx></app-ngrx>

H3 красный, где, как я чувствую, он должен быть красным, когда<app-ngrx class = "mine"></app-ngrx>