Angular2+のコンポーネント間のスタイル

Angular 2+では、コンポーネントスタイルが保護され、デフォルトで他のコンポーネントにブリードすることはありません。これは、ShadowDOMまたはShadowDOMエミュレーションを使用したViewEncapsulationのおかげです。ただし、コンポーネントのスタイルを：host 、：host-context 、 / deep / （現在は[ X173X] :: ng-deep ）。ビューカプセル化の動作を変更する方法もあります。

：亭主

特別な：host 疑似クラスセレクターを使用して、現在のコンポーネントの親となるホストコンポーネントのテンプレートにスタイルを適用できます。

:host {
  background-color: #545454;
  color: white;
  font-size: 1.5em;
}

：host（selector）でセレクターを指定して、ホストコンポーネントに存在するセレクターのスタイルのみを適用します。この例では、ホストに.darkクラスがある場合にのみスタイルが適用されます。

:host(.dark) {
  background-color: #545454;
  color: white;
  font-size: 1.5em;
}

：host-context

：host-context を使用すると、コンポーネントツリーでそれ自体の上にある任意のコンポーネントまたはhtml要素の条件に基づいて、現在のコンポーネントにスタイルを適用できます。一般的なユースケースは、たとえば特定のクラスがbody要素に存在する場合にスタイルを適用することです。これは、テーマ設定に非常に役立ちます。

次の例では、クラス.infoのspan要素は、.deep-purpleが上流のどこかにある場合にのみスタイル設定されます。

:host-context(.deep-purple) span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

::ng-深い

:: ng-deep を使用すると、スタイルが現在のコンポーネントに適用されますが、コンポーネントツリーの現在のコンポーネントの子であるコンポーネントにも細流化されます。

Angular 4.3より前は、::ng-deepの代わりに/ deep/または>>>が使用されていました。どちらの表記もブラウザによって廃止されたため、 ::ng-deepが一時的な回避策になりました。

次の例では、 span.info は、現在のコンポーネントとその子コンポーネントにスタイルがあります。

::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

これらすべての疑似クラスを組み合わせて、最大限の制御を行うこともできます。

:host-context(.deep-purple) ::ng-deep span.info {
  border: 3px solid hotpink;
  border-radius: 12px;
}

カプセル化を表示

ビューのカプセル化は、次のように、コンポーネントのデコレータで Native 、 Emulated （デフォルト）、またはNoneのいずれかに設定できます。

@Component({
  selector: 'my-app',
  ...,
  encapsulation: ViewEncapsulation.None
})

Native は、ブラウザーのネイティブShadowDOM機能を使用します。ブラウザのサポートは、ネイティブサポートに対してまだ非常に制限されています。
Emulated はデフォルトの動作であり、エミュレートされたShadowDOMを使用します。一般的に使用されているブラウザの大部分がShadowDOMをサポートしていないため、現在最も適切です。
None はビューのカプセル化を適用せず、1つのコンポーネントに適用されたスタイルも、アプリ全体にグローバルな影響を及ぼします。