AngularのCSSで「/deep/」と「::ng-deep」の違いとは？
今回はAngularのCSSにおける「/deep/」と「::ng-deep」の違いについてご説明いたします。
AngularのCSSで「/deep/」と「::ng-deep」の違いとは？
まず前提として、「/deep/」と「::ng-deep」はどちらも2024年5月現在非推奨です。
「/deep/」の書き方は完全非推奨で、「::ng-deep」は将来的に非推奨となるので、どちらかというと「::ng-deep」の方が新しいという状態です。
「/deep/」と「::ng-deep」の具体的な機能についてはほとんど同じとなりますが、公式ドキュメントをご参照ください。
ここで語るにはボリューミーとなるためです。ここでは簡単な使われ方の違いについてご説明いたします。
https://angular.jp/guide/component-styles#非推奨-deep—と-ng-deep-
「/deep/」はCSSのシャドウDOMピアシングコンビネーターの一つで、Angularだけでなく他のフレームワークでも使用されます。
「/deep/」ではなく「>>>」と書かれることもあります。Vue.jsでもこのような書き方があるでしょう。
「::ng-deep」はAngular特有のもので、機能としては「/deep/」と変わりません。
ただし2024年5月現在、「/deep/」は完全非推奨で、「::ng-deep」は将来的に非推奨という状態なので、まだ新しい「::ng-deep」を使った方が良いでしょう。
以上簡単にはなりますが、「/deep/」と「::ng-deep」の違いについてご説明いたしました。
終わりに
今回はAngularのCSSにおける「/deep/」と「::ng-deep」の違いについてご説明いたしました。