Blazor scoped CSS scopes are not the same as the ones from the HTML elements

I have a blazor page Page.razor and a css file for that page Page.razor.css. These files used to be in Components/Pages but I recently moved them into a subfolder of Pages. Now blazor generates different css scopes in the css file than for the html elements.

This is what's in my HTML document after starting the app:

<div class="chat" b-o6nfzu7aoq>

And this is what's in the css file:

.chat[b-dzcshse1ta] {...}

I've tried rebuilding, checking wether the link to {AppName}.styles.css in App.razor exists and creating a new css file for the page.