I have a Blazor WebAssembly project BlazorApp2 with following project structure
My head section in index.html :
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorApp2</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorApp2.styles.css" rel="stylesheet" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
window.MathJax = {
tex: {
macros: {
ceec: ['{\\fbox #1}\\,', 1],
ceece: ['\\underline{\\ {\\fbox{#1 }}\\ }', 1]
}
}
}
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="js/ckeditor.js"></script>
</head>
My index.razor:
@page "/"
@using BlazorApp2.Components
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<Gap2 />
Gap2.razor:
<h3>Gap</h3>
<span class="gap">@Text</span>
@code {
private string Text { get; set; } = "Z";
}
Gap2.razor.css
span.gap {
display: inline-block;
min-width: 4ex;
min-height: 2ex;
background-color: #ddd;
}
But Page Index shown as:
We can see the "Z" under "Gap" DO NOT have background-color #ddd.
Why Css Isolation do not work?
