SPA更新html的lang属性后浏览器未识别语言变更如何解决？

• 同步更新所有语言相关meta标签
  仅修改根元素lang属性不足以让浏览器重新识别语言，需要同步修改两个常用的语言声明meta标签：
  针对name属性的content-language标签：
  document.querySelector('meta[name="content-language"]')?.setAttribute('content', 'en')
  针对http-equiv属性的content-language标签：
  document.querySelector('meta[http-equiv="content-language"]')?.setAttribute('content', 'en')
• 主动触发浏览器内容重检测
  Chrome等浏览器的翻译模块默认只会在页面初始加载时扫描一次内容和语言属性，不会监听动态变更，你可以通过极小的DOM改动触发重新扫描，无任何视觉影响：

  const tempText = document.createTextNode('')
  document.body.append(tempText)
  tempText.remove()
  

• 同步配置translate属性
  可以给根元素添加translate属性明确告知浏览器是否需要翻译当前页面，切换语言时同步更新该属性即可：
  document.documentElement.setAttribute('translate', 'yes') // 允许翻译当前语言时使用，不需要翻译时设为no
• 确保页面内容完全替换
  要保证修改lang属性的时机是在页面所有旧语言文本都替换为新语言之后，如果页面还残留大量原语言文本，浏览器的文本识别逻辑还是会匹配到初始语言，触发错误的翻译提示。

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