lang属性必须在首屏HTML解析时存在，JS动态修改无效；正确方案是SSR/SSG生成多语言HTML入口，局部内容需显式标注lang。
lang 属性不能靠前端组件“动态绑定”来生效——它必须在首屏 HTML 解析时就存在，否则屏幕阅读器、浏览器翻译、SEO 都收不到信号。
为什么 Vue/React 的 v-bind:lang 或 :lang="locale" 无效
Vue 的 v-bind:lang 或 React 的 lang={locale} 确实能渲染出 <html lang="en-US">，但这是在 JS 执行后才插入 DOM 的。而 VoiceOver、NVDA、Chrome 翻译按钮、Google Search Console 全部只读取初始 HTML 字节流中的 <html lang="...">，JS 后续改值等于白做。
- 现象：
document.documentElement.lang = "ja"执行后，日语语音引擎不加载，页面仍被当成中文朗读 - 根本原因：辅助技术在 HTML parser 阶段就锁定了语言，JS 是 runtime 行为，太晚
- Vue 示例中写
<html v-bind:lang="currentLang">，若用 CSR（客户端渲染），服务端返回的仍是<html lang="zh-CN">，JS 覆盖无效
Vue/React 中真正可行的 lang 动态方案
不是“绑定”，而是“生成不同语言版本的 HTML 入口”。框架层必须配合 SSR 或 SSG：
- Next.js：在
app/layout.tsx里用<html lang={locale}>，locale来自路由参数（如/en/about）或generateStaticParams，确保每个语言路径输出独立 HTML - Nuxt：用
useLocaleHead({ lang: 'zh-CN' })，它会在 SSR 阶段把lang注入到首屏<html>标签中 - Vite + Vue Router SPA：无法靠 JS 切换
lang；必须构建多份 HTML（如index-zh.html、index-en.html），切换时window.location.href = '/en/index-en.html' - 绝对不要：在 mounted / useEffect 里执行
document.documentElement.lang = newLang—— 它只影响:lang()CSS 重计算（且不完全可靠），其他全失效
局部语言内容必须显式标注，不能依赖父级
即使整页是 zh-CN，表格里的英文产品名、<pre> 中的命令行、引用的日文句子，都得单独加 lang：
立即学习“前端免费学习笔记（深入）”；
-
<td lang="en">iPhone 16</td>✅ 有效，读屏用英语发音引擎 -
<pre lang="bash">curl -X POST</pre>❌ 错误，bash不是语言代码；应写<pre lang="en"># curl -X POST</pre> -
<p><span lang="ja">東京</span>天气晴</p>✅ 混排安全；<span>支持lang，且语义清晰 - CSS 匹配别用
p:lang(zh)做字体 fallback，因它只匹配lang="zh"（不含zh-CN）；改用属性选择器p[lang^="zh"]
最易被忽略的点：语言切换时，你不仅要换文案、换 hreflang、换路由，还必须让服务端或构建流程输出对应 lang 值的 HTML —— 这不是前端能 patch 的事，是架构层面的约束。
