我构建了一个简单的示例应用程序 RazorPagesMovie,并检查了应用程序索引部分的源页面,许多元素后面都跟着 b-tg5po7urw9。我找不到该文件/参考可能是什么或用途的解释?
示例:
<body>
<header b-tg5po7urw9>
<nav b-tg5po7urw9 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div b-tg5po7urw9 class="container">
<a class="navbar-brand" href="/Movies">RpMovie</a>
<button b-tg5po7urw9 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-tg5po7urw9 class="navbar-toggler-icon"></span>
</button>
我已经看过各种教程,但没有看到任何参考
这用于隔离CSS样式,实际上在前端JS框架中很常见:https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-9.0 #css-隔离-捆绑
在捆绑文件中,每个组件都与一个范围标识符相关联。对于每个样式组件,都会附加一个格式为 b-{STRING} 的 HTML 属性,其中 {STRING} 占位符是框架生成的十个字符的字符串。每个应用程序的标识符都是唯一的。在渲染的 Counter 组件中,Blazor 将范围标识符附加到 h1 元素:
<h1 b-3xxtam6d07>
{ASSEMBLY NAME}.styles.css 文件使用范围标识符将样式声明与其组件分组。以下示例提供了前面元素的样式:
/* /Components/Pages/Counter.razor.rz.scp.css */
h1[b-3xxtam6d07] {
color: brown;
}