CSS is lost on page navigation in static SSR with page-scoped interactive server directive

[Gaz83]

So this issue I am finding very difficult to replicate, tried in your examples and it just works fine.

Anyway, the issue.

This is all in Blazor Web App targeting .Net 8

I have the control on a page and it wall works great with theme applied etc. Now, if I navigate to another page which also has the control on or if navigate away and come back, the control looks like it looses all css formatting i.e. you have the line numbers followed by content, all of this just stacked vertically with overflow happening, all theming loss etc.

I can't attach an example project as it's all confidential stuff and producing an example is not working.

Just wondered if you may know of something that may cause this. All other controls on the pages work fine.

Pressing F5/refresh does fix it

[Gaz83]

I managed to create an example! it seems to happen if you have the control hidden and then show it after navigating.

[Gaz83]

BlazorApp1.zip

Attached project.

Steps Run it and use nav on left and go to Index1 Click button "Reset text" to show the Control, it will have json content. Use nav on left and go to Index2 Click button "Reset text" to show the Control. Observe that all styling is not applied.

[gaelj]

Thanks for creating an example of your issue. I will look into it.

[gaelj]

The sample can be fixed by replacing, in App.razor, <HeadOutlet /> with <HeadOutlet @rendermode="InteractiveServer" />.

Would that be acceptable ?

Edit: fyi the problematic behavior is unrelated to your "reset text" button ; I could reproduce it without.

Code Mirror 6 generates its CSS dynamically and uses this library https://github.com/marijnh/style-mod/blob/master/src/style-mod.js to append the CSS to the page's head.

I find it actually quite surprising that the CSS works on the first page load.

I can try to extract this dynamic CSS into a static file but it will have to be thoroughly tested, as I don't know right now if the CSS can get updated later than during the init, and changing the theme dynamically definitely won't be possible.

[gaelj]

So I confirm that the 2nd approach seems to work fine, although it could be viewed as a horrible hack.

• keep the simple <HeadOutlet /> in App.razor
• start the app, do an initial load of the page with the theme you want to use
• in browser dev tools, copy the contents of the first style tag
• paste the contents in your apps' wwwroot/app.css

I cannot - for now - guarantee this won't have any other side effects, than being unable to switch themes, so I currently don't feel super comfortable with providing this CSS in the wrapper library. Of the 2, I'd recommend using <HeadOutlet @rendermode="InteractiveServer" />, if possible.

[Gaz83]

I have just taken a look and I can confirm that HeadOutlet works fine for me in my situation. Not sure if this will work for someone who wishes to use Static server-side rendering.

Have you tried adding @rendermode="InteractiveServer" to the CodeMirror component/wrapper?

[gaelj]

• That would break compatibility with WASM
• It won't change anything in the present case where you already specify with the page directive, that all components in the page should be rendered in InteractiveServer mode. The problem is that CM6 tries to modify the header of the page. The header is managed in blazor server by HeadOutlet. So if HeadOutlet isn't told that the header could change after rendering the page, it won't try to persist thoses changes on the next navigation.

[gaelj]

@Gaz83 can we close this issue ? I added an example project with the new hosting model.

[gaelj]

@Gaz83 feel free to reopen if needed

[Gaz83]

@gaelj Sorry for late reply, been a bit tied up with other things in life. Yes I was happy for this to be closed, thank you.