【angular】::ng-deepの使用法

プログラミング

2024.08.27

::ng-deepはカプセル化されたコンポーネントに適用するためのCSSセレクタです。
自作の子供コンポーネント、外部ライブラリのコンポーネントなど、他のコンポーネント内の要素にスタイルを適用したい場合に使用します。

Angularでは通常はcssの適用範囲はコンポーネント内に限定されますが、::ng-deepを使うとグローバルなスタイルとして扱われてしまいます。そのため:hostと併用することが望ましいです。

<!-- この自作コンポーネント内に.some-classがあるとする -->
<my-component></my-conponent>

:host {
  ::ng-deep .some-class {
    margin: 0;
  }
}

::ng-deepは非推奨となっています。ViewEncapsulationを使ったりカスタムCSSを適切に配置することで回避すべきとされています。
ただ、::ng-deepが一番使いやすいので破壊的変更がなされるまでは使用してもいいのではないかと思っています。