lang属性确实继承，但仅影响文本处理行为而非DOM属性值；其继承可被lang=""、iframe、第三方节点等硬性中断，且:lang()伪类不响应JS动态修改。
为什么lang属性看起来“没继承”
不是继承失效，而是你误以为它像 CSS 那样自动复制属性值。实际上，lang是 W3C 明确定义的可继承全局属性，但它只影响**文本处理行为**（如语音朗读、断词、字体回退），不改变 DOM 中子元素的 lang 属性值本身。浏览器在渲染时向上查找最近的显式 lang 声明，但开发者工具里看子元素的属性列表，依然显示 lang="" 或空 —— 这是正常现象。
常见错误现象：
-
<p>Hello 世界</p>没加lang，结果「世界」被中文字体渲染成挤压状（因继承了<html lang="zh-CN">） - 用
document.querySelector("p").getAttribute("lang")返回null，就断定“没继承”，其实语音引擎和字体链已按zh-CN工作 -
<div lang="en"><p>API</p></div>中的<p>在开发者工具「Computed」面板 language 字段显示en，但你在 JS 里查不到该属性 —— 因为它没被写入 DOM，只是运行时推断
哪些场景会让lang继承实际中断
继承链看似存在，但一碰就断。真正导致行为异常的，是以下三类硬性断裂点：
-
lang=""或lang="und"出现在祖先链上：哪怕只有一层写了空值，后续所有后代都失去语言上下文，降级为浏览器默认语言（通常是 en） -
<iframe>是独立文档上下文：父页的lang完全不传递，子 iframe 必须单独声明<html lang="ja"> - 第三方 SDK 注入的节点（如客服浮窗、统计弹层）：它们创建的 DOM 几乎从不带
lang，且不在你的模板控制范围内，必须用MutationObserver监听并补全
React/Vue 组件中动态挂载的内容（如 Tooltip、Modal）也属于此列 —— 它们默认不读取 document.documentElement.lang，需在挂载后手动设置。
立即学习“前端免费学习笔记（深入）”；
如何安全地动态更新lang并确保生效
只改 document.documentElement.lang = "ja" 是最常见也最无效的做法。屏幕阅读器、拼写检查、字体引擎全部无感，因为已有 DOM 节点的 language 上下文早已固化。
实操建议：
- 切换前，先用
document.querySelectorAll("[lang]")找出所有显式声明了lang的元素，逐个更新其lang值（如从"en-US"→"ja-JP"） - 对未声明
lang的纯文本容器（如<div class="content">），不要依赖继承，改用class控制样式和行为（例如html.lang-ja .content） - 更新完立即执行
document.title = document.title，这是强制屏幕阅读器重新读取根节点语言的最小成本兜底动作 - 服务端渲染（SSR）页面，必须在初始 HTML 响应中就输出正确
<html lang="...">；JS 后续修改仅用于交互态同步，不能替代首屏声明
:lang() 伪类为什么不响应 JS 修改
:lang(zh) 不是监听器，它在 HTML 解析完成时就完成了匹配计算。之后任何 JS 对 lang 属性的赋值，都不会触发样式重算 —— 这是浏览器渲染机制决定的，无法绕过。
所以别试图用 :lang() 做动态切换。替代方案很直接：
- 用
document.documentElement.setAttribute("class", "lang-ja")替代lang赋值 - CSS 改写为
html.lang-ja :lang(zh) { ... }或更稳妥的html.lang-ja p { font-family: "Noto Sans JP"; } - 若仍需保留
:lang()用于字体链（如:lang(zh) { font-family: "PingFang SC", sans-serif; }），那就只在服务端或构建时生成多语言 HTML 版本，避免运行时修改
真正容易被忽略的是：即使你把所有 lang 都更新了，:lang() 也不会自动重匹配 —— 它只认初始解析时的语言快照。这点在 SPA 多语言切换中，几乎总是第一个掉进的坑。
