如何修改WASM独立应用加载页面的背景色？

我正在开发一款WASM独立应用，想要修改加载页面的背景色（默认为白色）。以下是我在Index.html中尝试的方法：

第一种尝试： #

<body>
    <div style="background-color: red" id="app">
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
</body>

结果：页面在首页加载完成前始终为白色。

第二种尝试（仅为body添加style属性）： #

<body style="background-color: red" >

结果：页面先显示白色，再变为红色，之后首页加载完成，仍未达到预期效果。

请问我忽略了什么？

问题原因及解决方法 #

你忽略了两个核心点：

1. 初始渲染的层级问题：浏览器加载页面时，会先渲染<html>元素的默认样式，它的默认背景色是白色。即便给<body>设置了背景色，在浏览器解析到<body>样式前，<html>的白色背景会先显示，导致短暂的白色闪烁。
2. 加载时序的覆盖问题：Blazor初始化过程中，<app>元素还未填充内容时，仅给它设置背景色无法覆盖整个页面的初始空白区域。

正确的解决方式是在<head>中添加全局样式，同时给<html>和<body>设置背景色，确保样式在页面加载第一时间生效：

<head>
    <!-- 其他head内容（如meta、title等） -->
    <style>
        html, body {
            background-color: red;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
    </style>
</head>
<body>
    <div id="app">
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
</body>

这样设置后，<html>和<body>会在页面加载初期就应用红色背景，避免初始白色闪烁；min-height: 100vh则保证背景色覆盖整个视口高度，不会出现留白。如果需要进一步优化体验，还可以在<app>中添加加载动画，并给动画容器设置相同背景色，确保Blazor组件渲染完成前视觉风格统一。

内容的提问来源于stack exchange，提问作者Toto