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.

score -1 · Accepted Answer · answered Dec 10 '21 at 20:22

-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.

answered Dec 10 '21 at 20:22

Milad Ahmadi

::deep doesnt seem to be a valid css pseudo selector - when I try to use it, I get a compiler error saying 'unknown pseudo selector 'deep' – Kappacake Sep 03 '22 at 10:15

1 Answers1