CSS isolation の紹介
異なるコンポーネントに個別のスタイルを設定したい場合がありますが、すべてのクラスを wwwroot/css/site.css に記述したり、特定の要素のスタイルを変更すると、1つの変更ですべてのコンポーネントに影響を与える可能性があります。このようなグローバルな競合は避ける必要がありますが、どうすればよいのでしょうか？
.NET 5 では CSS 分離（CSS isolation）が導入されました。コンポーネントごとに個別の CSS ファイルを作成し、命名規則は {コンポーネント名}.razor.css とします。このファイルは自動的に {コンポーネント名}.razor と結合され、大文字小文字は区別されません。以下の図のように、Blog.razor.css でも blog.razor.css でも Blog.razor と同じグループとして扱われます。
CSS 分離はビルド時に処理され、Blazor は CSS セレクターを書き換えて {プロジェクト名}.styles.css ファイルを生成します。このファイルへの参照パスは wwwroot/index.html（Blazor WebAssembly）または Pages/_Layout.cshtml（Blazor Server）の <head> タグ内にあります。ビルド時に生成されるため、プロジェクト内には表示されませんが、ブラウザの Dev tool を開いて Sources タブに切り替えると、このファイルを確認できます。
クラスの後ろに見慣れない文字列が付いていることに気づくかもしれません。例えば .page[b-mxoy4q7bj7] や .main[b-mxoy4q7bj7] などです。これは Blazor が CSS セレクターがどのコンポーネントに適用されるかを識別するためのスコープ識別子で、形式は b- に続く10桁の数字と英字です。各コンポーネントのスコープ識別子は一意です。したがって、この .main および .page クラスは [b-mxoy4q7bj7] に対応するコンポーネントにのみ作用することがわかります。コメントには /* _content/BlazorServer/Shared/MainLayout.razor.rz.scp.css */ と書かれており、Shared/MainLayout.razor.css を開くと確かに .main と .page クラスがあります。rz.scp.css という拡張子は、CSS セレクターがどのコンポーネントに属するかを識別するために使われます。
次に Blog.razor.css に label に対するスタイル変更を追加し、Ctrl + Shift + B でプロジェクトをビルドしてから Web ページを確認すると、文字色が変わっていることがわかります。BlazorServer.styles.css の中でも Blog.razor.rz.scp.css のスタイルブロックに label[b-0ae5hiw99t] が追加されています。
子コンポーネントへのスタイル適用
Post コンポーネントの label 要素にも同じスタイルを適用したいが、それぞれに razor.css ファイルを作りたくない場合はどうすればよいでしょうか？Blazor では便利な方法が用意されており、CSS セレクターの前に ::deep を付けるだけです。Blog.razor.css の label の前に ::deep を追加すると、Post の label 要素の文字色もすべて変わります。BlazorServer.styles.css のクラスも label[b-0ae5hiw99t] から [b-0ae5hiw99t] label に変わります。
ただし、::deep が有効になるには親子関係が必要です。親コンポーネントのスコープ識別子は <div> タグにのみ作用します。子コンポーネントが <div> タグで囲まれていない場合は効果がありません。Blog.razor で Post コンポーネントを囲んでいる <div> タグをコメントアウトして保存し、Web ページを確認すると、<label> の文字色がすべて黒に戻ります。しかし BlazorServer.styles.css のクラスは依然として [b-0ae5hiw99t] label のままです。
参照:
注: 本稿のコードは .NET 6 + Visual Studio 2022 でリファクタリングされています。原文リンクとリファクタリング後のコードを比較しながらお読みいただくことをおすすめします。ご一読いただき、原作者へのご支援をお願いいたします。