Lo que he entendido de host es que si tengo un componente hijo dentro de un componente padre y queremos diseñar un componente hijo del componente padre, podemos usar: host. y: contexto de host para viceversa. Avíseme si este es el uso correcto del host.

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

Cuando trato de hacer lo mismo en mi aplicación, no funciona

Plantilla de componente de aplicación

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

plantilla de componente 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>

Componente de aplicación CSS

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

Esto no parece funcionar. Por favor, ayuda, no puedo entender.

Miré esta pregunta, pero no pude entender

Angular 2: ¿Cómo diseñar el elemento host del componente?

Actualizado después de @Gunter Answer

En mi plantilla app-ngrx he agregado

  <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>

y en el archivo app-ngrx css he agregado

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

Pero incluso sin agregar el mío en el componente de la aplicación como

<app-ngrx></app-ngrx>

El h3 es rojo donde, como siento, debería ser rojo cuando<app-ngrx class = "mine"></app-ngrx>