0
点赞
收藏
分享

微信扫一扫

Hello Blazor:(14)CSS隔离 #yyds干货盘点#

前言

上次我们说到,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元素才会有标识符:

Hello Blazor:(14)CSS隔离 #yyds干货盘点#_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隔离”是由编译任务实现的,而不是运行时。

Hello Blazor:(14)CSS隔离 #yyds干货盘点#_html_02

参考资料

[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​​​​


举报

相关推荐

0 条评论