Blazor CssScope generates weird css class

I was using MS docs to configure a custom scope identifier for my isolated css code.I added this to my .csproj file

<ItemGroup><None Update="Pages/Jobs.razor.css" CssScope="jobs-scope" /></ItemGroup>

this is my Jobs.Razor.css file

::deep .blurry-dialog-background {  backdrop-filter: blur(10px);}

This is how I would like to reference the css class in my Jobs.Razor.cs

DialogOptions options = new(){    ClassBackground = "blurry-dialog-background[jobs-scope]",    CloseButton = true,};

But what I can see using chrome dev tools is, that the generated file looks like this:

/* _content/Project/Pages/Jobs.razor.rz.scp.css */[jobs-scope] .blurry-dialog-background {  backdrop-filter: blur(10px);}

So how do I correctly identify the css so I can use it in my code? All auto generated css scopes look different and I'm not sure if I'm doing something wrong or if it is a bug?