Problem with CSS Isolation when I use AddRazorRuntimeCompilation

Question

I use CSS Isolation, but when I use builder.Services.AddRazorPages().AddRazorRuntimeCompilation(); CSS Isolation not works.

<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />

All styles will be loaded, but not afford to my elements.

h1[b-2uayqwgjuo]{
    color:red;
}
/* _content/WebApplication1/Pages/Privacy.cshtml.rz.scp.css */
h1[b-5u69ocmej3]{
    color:blue;
}

How can I handle that.

Answer 1

You have to use, ::deep for example

<div>
    <input id="first-name-input" type="text" />
</div>

If you want to set style to first-name-input you have to do like this:

::deep #first-name-input {
    background: red;
}

Summary: If any elements doesn't have random element like 5u69ocmej3 you have to set style for those like above codes.