createPortal用于将子组件渲染到DOM树外指定节点，解决弹窗被overflow裁剪或z-index失效问题，其事件和context仍遵循React树而非DOM树。
lang属性在React/Vue组件中不会自动继承
组件内部动态生成的DOM节点（比如弹窗、Tooltip、异步加载的内容）默认没有lang值，哪怕父容器写了lang="zh-CN"。浏览器和屏幕阅读器只看元素自身的lang属性，不查“它妈有没有”。
常见错误现象：document.querySelector("dialog").dataset.lang返回undefined；NVDA读出英文单词却用中文语调；Chrome翻译按钮对局部区块失效。
- SSR首屏渲染时
lang可能正确，但hydration后子组件没同步设置，导致Accessibility面板显示computedlanguage: "unknown" - 第三方SDK注入的浮层（如客服按钮、埋点script插入的
<div id="livechat"></div>）几乎从不带lang，必须手动补全 - Vue 3的
<teleport></teleport>和React的createPortal会把节点移出原有DOM树，原层级的lang继承链彻底断裂
Shadow DOM里lang完全不继承，必须显式透传
lang在Shadow DOM中是孤立的——宿主元素设了lang="ja"，shadow root里的<p></p>照样是空的。这不是bug，是规范明确规定的边界隔离。
使用场景：Web Components封装国际化UI、自定义<date-picker></date-picker>、或用Lit/Stencil构建可复用组件时，若忽略这层，语音合成会直接降级到系统默认语言。
立即学习“前端免费学习笔记（深入）”；
- 在
connectedCallback里手动设置：this.shadowRoot.querySelector("slot").setAttribute("lang", document.documentElement.lang) - 更稳妥的做法是通过
slot内容显式声明：<my-component><span lang="en">Save</span></my-component>，再用:lang(en)匹配 - 别依赖CSS继承模拟，
lang不是样式属性，inherit对它无效
:lang(zh)匹配失败，大概率是lang值没落到目标元素上
:lang(zh)看起来像CSS选择器，但它背后依赖的是真实存在的lang属性值——不是靠父级“传下来”的，而是靠浏览器向上查找最近一个合法声明。如果目标<span></span>本身没lang，且所有祖先都没写对（比如写了lang="ch"或xml:lang="zh-CN"），那这条规则就永远不生效。
典型错误：
-
<html lang="zh-CN"><body><p>API <code>response</code></p></body></html>→code元素被:lang(en)漏掉，因为没显式声明 - 框架里用
v-html或dangerouslySetInnerHTML插入HTML，原始字符串不含lang，JS也不会自动补 - BCP 47格式错：写成
lang="zh_Hans"（下划线）或lang="Chinese"，浏览器视作无效值，不参与任何:lang()匹配
工程化兜底：别等运行时报错，要在构建和测试阶段卡住
靠人肉检查lang是否写对，90%会漏。真正卡住质量的，是让问题在CI里暴露出来。
实操建议：
- 用
eslint-plugin-jsx-a11y的jsx-a11y/html-has-lang规则强制<html>必须有lang - 在Playwright测试里加断言：
await expect(page.locator('p')).toHaveAttribute('lang', 'en')，针对关键多语言区块 - 构建时用
html-validate跑valid-lang规则，拦截lang="zh_cn"这类非法值 - 对
iframe内容单独处理：主页面不能替它设lang，得在iframe文档内部显式写<html lang="en-US">
最常被忽略的一点：动态切换语言时，只改document.documentElement.lang远远不够——已挂载的组件、Shadow DOM、以及第三方注入节点，都不会自动响应这个变更。得配合MutationObserver监听并批量重置，或者干脆用CSS变量+:lang()组合做视觉层兜底。
