Blazor WASM中使用谷歌翻译时PageTitle引发Diff错误

问题背景 #

多数浏览器自带页面翻译功能，但在Blazor WASM应用中，用户使用该功能后切换页面会触发以下Diff错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
  Unhandled exception rendering component: Cannot read properties of null (reading 'insertBefore')
  TypeError: Cannot read properties of null (reading 'insertBefore')
      at x (https://devolv.com/_framework/blazor.webassembly.js:1:17125)
      at M (https://devolv.com/_framework/blazor.webassembly.js:1:16836)
      at se.insertMarkup (https://devolv.com/_framework/blazor.webassembly.js:1:24546)
      at se.insertFrame (https://devolv.com/_framework/blazor.webassembly.js:1:23416)
      at se.applyEdits (https://devolv.com/_framework/blazor.webassembly.js:1:21490)
      at se.updateComponent (https://devolv.com/_framework/blazor.webassembly.js:1:20774)
      at https://devolv.com/_framework/blazor.webassembly.js:1:59513
      at Vt.Ke._internal.renderBatch (https://devolv.com/_framework/blazor.webassembly.js:1:59885)
      at Object.Gt [as invokeJSFromDotNet] (https://devolv.com/_framework/blazor.webassembly.js:1:62728)
      at Object.Ii (https://devolv.com/_framework/dotnet.7.0.2.85wfq42abb.js:5:71465)

已排除OnAfterRender生命周期方法的影响，应用本身已实现本地化，尝试过<html class="notranslate">和<meta name="googlebot" content="notranslate">阻止翻译，但对用户手动触发的翻译无效。该错误在MudBlazor等Blazor站点也可复现，且在当前站点出现频率更高，经排查问题出在使用PageTitle组件的页面，移除组件可避免错误，但需保留组件的解决办法。

可行解决方案 #

1. 自定义PageTitle组件替代原生组件 #

原生PageTitle组件直接操作<title>标签，浏览器翻译会篡改该标签的DOM结构，导致Blazor的Diff算法失效。可以自定义一个组件，通过JS互操作安全更新标题：

自定义组件代码：

@inject IJSRuntime JSRuntime

@code {
    [Parameter]
    public string Title { get; set; } = string.Empty;

    protected override async Task OnParametersSetAsync()
    {
        await JSRuntime.InvokeVoidAsync("updateDocumentTitle", Title);
    }
}

添加对应的JS代码（在wwwroot/index.html中）：

window.updateDocumentTitle = function(title) {
    // 确保title元素存在，若被翻译篡改则重新创建
    let titleElement = document.querySelector('title');
    if (!titleElement) {
        titleElement = document.createElement('title');
        document.head.appendChild(titleElement);
    }
    titleElement.textContent = title;
};

2. 监听翻译事件重置Title元素 #

浏览器翻译完成后会触发languagechange事件，可在该事件中重置<title>标签的结构，避免Blazor Diff出错：

在wwwroot/index.html中添加JS代码：

document.addEventListener('languagechange', function() {
    const originalTitle = document.title;
    // 移除现有title元素
    const titleElement = document.querySelector('title');
    if (titleElement) {
        titleElement.remove();
    }
    // 创建新的title元素并添加到head
    const newTitle = document.createElement('title');
    newTitle.textContent = originalTitle;
    document.head.appendChild(newTitle);
});

这样每次翻译完成后，都会重置<title>标签为干净的DOM结构，Blazor后续更新时就能正常识别。

3. 禁用特定元素的翻译 #

虽然全局禁止翻译对手动操作无效，但可以针对<title>标签单独设置禁止翻译：

<title class="notranslate">你的页面标题</title>

部分浏览器会尊重该类名，避免翻译标题标签，从而防止DOM结构被篡改引发Diff错误。

总结 #

上述方案中，自定义PageTitle组件是最可靠的解决方式，它绕开了Blazor原生组件对title标签的直接绑定，通过JS互操作确保DOM操作的安全性，同时保留了动态更新页面标题的功能。监听翻译事件的方式则适合快速修复现有项目，无需修改组件结构。

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