AngularのCSSで「/deep/」と「::ng-deep」の違いとは?

2024年5月30日

今回は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」の違いについてご説明いたしました。

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
チャンネル登録者1000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Angular

Posted by ちこ