Hello Blazor:（14）CSS隔离

前言

上次我们说到，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();
}