When a Blazor-Server application loses connectivity from the browser with the server, it displays a semi-transparent obscuring layer and a message informing the user it is trying to reconnect.
My most recent release of Morris.Blazor.Web.Modal uses the HTML <dialog> element to ensure users cannot tab to controls beneath the currently focused Modal window. The problem here is that if the browser loses connectivity with the server while a <dialog> is displayed, the <dialog> will appear over the connection status.
A simple trick to fix this problem was to detect when the Blazor connectivity UI appears; when it does then add a class to the <body> element, and have CSS rules set the opacity for <dialog> elements to zero.
body.blazor-server-disconnected dialog {
opacity: 0;
}
new MutationObserver(() => {
const modal = document.getElementById("components-reconnect-modal");
if (modal) {
document.body.classList.add("blazor-server-disconnected");
} else {
document.body.classList.remove("blazor-server-disconnected");
}
})
.observe(document.body, { childList: true, subtree: false }); 
Comments