前言

上次我們說到，FindRazorSourceFile使用有一定限制.

查看它的源碼，發現它僅查找以b-開頭屬性名的HTML元素：

function?getScope(element:?Element):?string?|?null?{return?element.getAttributeNames().filter(name?=>?name.startsWith('b-'))[0]?||?null; }async?function?getRazorSourceName(scope:?string?|?null):?Promise<RazorSourceName?|?null>?{if?(scope?===?null)?return?null;let?razorSourceName?=?razorSourceMap[scope]?||?null;if?(razorSourceName?!==?null)?return?razorSourceName;const?res?=?await?fetch(`_content/FindRazorSourceFile/RazorSourceMapFiles/${scope}.txt`);if?(res.ok)?{const?text?=?await?res.text();const?p?=?text.replace(/[\r\n]*$/ig,?'').split('|');const?razorSourceName?=?{?projectName:?p[0],?itemName:?p[1]?};razorSourceMap[scope]?=?razorSourceName;return?razorSourceName;}else?{razorSourceMap[scope]?=?NotFound;return?NotFound;} }

那這個b-是什么意思？

CSS 隔離

原來，FindRazorSourceFile實際上使用了Blazor中的“CSS隔離”功能^[1]。

CSS隔離幫助避免組件和庫的樣式沖突。

例如Index.razor，包含有如下HTML標記:

<h1>Hello,?world!</h1>

實際在瀏覽器中顯示時，HTML會被添加以b-開頭的屬性作為標識符，例如:

<h1?b-82p0zt5u2f>Hello,?world!</h1>

CSS隔離標識符是唯一的，并且與每個組件相關聯。也就是說，b-xxx可以用來作為HTML元素與.razor文件之間的對應key。

強制生成標識符

但是，你可能注意到，默認情況下，只有使用了*.razor.css的HTML元素才會有標識符：

這也是正確的，因為CSS隔離是為了匹配的Razor文件中的HTML元素，在應用的其他位置定義的同名CSS聲明都不會與這個組件的樣式沖突。

如果沒使用特定組件樣式，則無需CSS隔離，當然也就不用生成標識符。

而FindRazorSourceFile使用了一個技巧，它增加了一個MsBuild編譯目標，強制對所有Razor文件執行了`ComputeCssScope`任務^[2]：

<ComputeCssScope?ScopedCssInput="@(_Fictional_RazorCss)"?Targetname="$(TargetName)"><Output?TaskParameter="ScopedCss"?ItemName="_Fictional_RazorCss_with_Scope"?/> </ComputeCssScope>

從ComputeCssScope任務的源碼中，我們可以找到標識符的生成算法：

private?string?GenerateScope(string?targetName,?string?relativePath) {using?var?hash?=?SHA256.Create();var?bytes?=?Encoding.UTF8.GetBytes(relativePath?+?targetName);var?hashBytes?=?hash.ComputeHash(bytes);var?builder?=?new?StringBuilder();builder.Append("b-");builder.Append(ToBase36(hashBytes));return?builder.ToString(); }

結論

從本文中，我們知道了“CSS隔離”功能，并且了解到“CSS隔離”是由編譯任務實現的，而不是運行時。

參考資料

[1]

“CSS隔離”功能: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

[2]

ComputeCssScope任務: https://github.com/dotnet/sdk/blob/main/src/RazorSdk/Tasks/ComputeCssScope.cs

總結

以上是生活随笔為你收集整理的Hello Blazor:（14）CSS隔离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。