Angular[メモ] ViewEncapsulation.Noneのとき `:host`は使えない

コンポーネント自身にスタイルを当てたい場合、:host が使うことがある

:host{
 display: inline-block;  // コンポーネントの中の要素に応じた幅にしたいときとか
}

でも、下記のようにスタイルのカプセル化を解除していると :host のスタイルが当たらない

@Component({
  selector: 'hoge',
  templateUrl: './hoge.component.html',
  styleUrls: ['./hoge.component.scss'],
  encapsulation: ViewEncapsulation.None,  // スタイルのカプセル化をしない
})

// 上記 :hostで書かれたスタイルは効かない

考えてみると当然かも知れない・・・

encapsulation: ViewEncapsulation.Noneでコンポーネント自身にスタイルをあてたい場合はコンポーネント名で(普通に)あてる

hoge{
 display: inline-block;
}