[Blazor] Monaco Editor breaks when navigating back and forth with per page rendermode

[Ghevi]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When using Monaco Editor in Blazor with render mode set per component page and navigating back and forth without, only initialize properly the first time. If you navigate back again then it breaks, as you can see these lines are missing,
left when it's ok, right when it's broken:

This is when rendermode is set globally in App.razor and it doesn't have the same issue:

This is when the rendermode is set per page (omitted the pages screenshots but the rendermode there is set):

A possible work around is to navigate with forceLoad: true but maybe one wants to use <NavLink /> instead.
Not sure if I should have opened this in their repo instead, it seems an issue for both.

To dig deeper in what happens, you can:

• set chrome to break on the element subtree modification
  
• for example where some of the css is loaded, up the callstack you have methods that initialize the editor that have some different state if it's the first or following navigations to the page, but i couldn't find the cause:
  

Expected Behavior

No response

Steps To Reproduce

https://github.com/Ghevi/blazor-monaco-editor-navigation-bug

-Click on libman.json and restore client side libraries
-Run the app
-Navigate to Monaco page
-Navigate to Home
-Navigate to Monaco page again
-Monaco editor should be broken

-Add @rendermode="InteractiveServer" to <HeadOutlet /> and <Routes/> in App.razor
-Do the previous steps again
-Monaco editor should be fine

Exceptions (if any)

No response

.NET Version

8.0.400-preview.0.24324.5

Anything else?

.NET SDK:
Version: 8.0.400-preview.0.24324.5
Commit: 736a2616db
Workload version: 8.0.400-manifests.88eef10b
MSBuild version: 17.11.0+1192b22fd

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22631
OS Platform: Windows
RID: win-x64
Base Path: C:\Program Files\dotnet\sdk\8.0.400-preview.0.24324.5\

.NET workloads installed:
Configured to use loose manifests when installing new manifests.
[maccatalyst]
Installation Source: VS 17.11.35125.118
Manifest Version: 17.2.8053/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.maccatalyst\17.2.8053\WorkloadManifest.json
Install Type: FileBased

[ios]
Installation Source: VS 17.11.35125.118
Manifest Version: 17.2.8053/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.ios\17.2.8053\WorkloadManifest.json
Install Type: FileBased

[maui-windows]
Installation Source: VS 17.11.35125.118
Manifest Version: 8.0.61/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.maui\8.0.61\WorkloadManifest.json
Install Type: FileBased

[android]
Installation Source: VS 17.11.35125.118
Manifest Version: 34.0.113/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.android\34.0.113\WorkloadManifest.json
Install Type: FileBased

[aspire]
Installation Source: VS 17.10.35013.160
Manifest Version: 8.0.0/8.0.100
Manifest Path: C:\Program Files\dotnet\sdk-manifests\8.0.100\microsoft.net.sdk.aspire\8.0.0\WorkloadManifest.json
Install Type: FileBased

Host:
Version: 8.0.6
Architecture: x64
Commit: 3b8b000a0e

.NET SDKs installed:
5.0.408 [C:\Program Files\dotnet\sdk]
6.0.424 [C:\Program Files\dotnet\sdk]
7.0.203 [C:\Program Files\dotnet\sdk]
8.0.302 [C:\Program Files\dotnet\sdk]
8.0.400-preview.0.24324.5 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.32 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.19 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.0-rc.2.23480.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.32 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.19 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.0-rc.2.23479.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.30 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.32 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.19 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
Not set

global.json file:
Not found

Learn more:
https://aka.ms/dotnet/info

Download .NET:
https://aka.ms/dotnet/download

[javiercn]

@Ghevi thanks for contacting us.

This seems to be specific to the way the Monaco editor works where it is injecting scripts into the DOM instead of using other methods like Document.adoptedStyleSheets or import statements to bring in the stylesheets and scripts respectively.

In this case, you might be able to make it work by post-processing the document after initialization and adding the data-permanent attribute to the injected elements.

Without that, Blazor simply doesn't know which elements need to be preserved and when it diffs out the document will just remove them.

[Ghevi]

@javiercn Ah didn't know about that attribute, thanks i will try it!

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.