[解決済み】Angular 2：コンポーネントのホスト要素にスタイルを設定するにはどうすればよいですか？

質問

Angular 2のmy-compというコンポーネントを持っています。

<my-comp></my-comp>

Angular 2でこのコンポーネントのホスト要素をどのようにスタイルするか？

Polymerでは、":host"セレクタを使用することになります。Angular 2で試してみました。しかし、それは動作しません。

:host {
  display: block;
  width: 100%;
  height: 100%;
}

また、コンポーネントをセレクタとして使用してみました。

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

どちらのアプローチもうまくいかないようです。

ありがとうございます。

解決方法は？

バグがあったが、一応修正した。 :host { } は正常に動作するようになりました。

また、サポートされているのは

• :host(selector) { ... } について selector ホスト要素上の属性、クラス、...にマッチするよう

• :host-context(selector) { ... } について selector 親コンポーネント上の要素、クラス、...にマッチするよう

• selector /deep/ selector (エイリアス selector >>> selector はSASSでは動作しません)、要素の境界を越えてスタイルを一致させるために

  • UPDATEです。 SASSは非推奨です /deep/ .
    
    Angular（TS、Dart）追加 ::ng-deep をSASSと互換性のある代替品として提供します。

  • UPDATE2です。 ::slotted ::slotted は現在、すべての新しいブラウザでサポートされており、`ViewEncapsulation.ShadowDom' と共に使用することができます。
    
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

こちらもご覧ください Angular 2 コンポーネントに外部 css スタイルを読み込む

/deep/ と >>> は 影響なし は、Chrome と同じセレクタコンビネータで、非推奨とされています。

Angularはそれらをエミュレート（書き換える）しているので、それらをサポートするブラウザに依存しません。

また、このような理由から /deep/ と >>> とは動作しません。 ViewEncapsulation.Native これは、ネイティブのシャドウ DOM を有効にするもので、ブラウザのサポートに依存します。