lang属性必须显式绑定到真实DOM元素，无法自动透传；根元素lang决定整页语言基调，局部lang需与框架生命周期对齐且须同步dir属性以确保Unicode双向算法正确生效。
lang 属性不能靠组件 props 自动透传，必须显式挂载到真实 DOM 元素上；根元素的 lang 决定整页语言基调，组件内部的局部 lang 只在对应节点生效，且需与框架生命周期对齐。
Vue 中 lang 无法从父组件自动继承的原因
Vue 默认把所有未声明的 prop 当作 attributes 绑定到组件根元素（$attrs），但 lang 是全局属性，不参与响应式系统，也不触发更新——它只在 HTML 解析时被读取一次。
常见错误：<my-card lang="ja"></my-card> 在子组件模板里直接用 lang，结果渲染后根元素没挂上，屏幕阅读器完全无视。
- 必须在组件定义中设置
inheritAttrs: false，否则lang会被 Vue 当作普通 attribute 吞掉 - 模板中要显式用
v-bind="$attrs"把lang挂到真实 DOM 标签上（如<div v-bind="$attrs">） - 若组件根节点是
<teleport>或<fragment>，lang会丢失——必须确保最终输出的是单个原生元素 - SSR 渲染时，服务端输出的
lang值必须和客户端初始值一致，否则 hydration 失败导致辅助技术上下文错乱
React 中 lang 传递失败的典型场景
React 不会自动把 lang 注入 DOM，除非你把它作为 prop 显式 spread 到 host element 上。JSX 的 lang 是合法 prop，但不会自动变成 DOM attribute，除非你手动转发。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 错误写法：
<Card lang="fr" />+ 子组件内<div>{children}</div>→lang彻底消失 - 正确写法：解构
lang并 spread 到容器元素：<div {...props}>...</div>或<div lang={props.lang}>...</div> - 函数组件返回 Fragment（
<></>）时，lang无处可挂——必须包裹一层真实 DOM 节点 - 动态插入内容（如通过
dangerouslySetInnerHTML）时，lang不会自动继承，需在插入前手动补全每个外文节点的lang属性
多语言组件中 lang 和 dir 必须同步更新
lang 控制语言语义，dir 控制文本方向逻辑，二者绑定紧密。比如阿拉伯语页面既要 lang="ar"，也要 dir="rtl"；单独改一个，光标位置、表单 placeholder、数字排布都会异常。
立即学习“前端免费学习笔记（深入）”；
- 切换语言时，不能只改
document.documentElement.lang，还要同步设document.documentElement.dir = "rtl"（或 "ltr"） - 组件内局部
lang="he"时，若内容含数字或混合英文，dir="rtl"也得加在同个元素上，否则 Unicode 双向算法（UBA）不触发 - CSS 的
:lang(ar) { direction: rtl; }不可靠——direction是渲染层样式，不改变底层 UBA 行为；必须用 HTMLdir属性 - 第三方 UI 库（如 Ant Design、MUI）通常只处理
dir，不自动同步lang，需手动 patch 或 wrapper 封装
lang="zh-CN" 写进 HTML，而是让每个动态生成、跨框架通信、服务端直出、甚至 Web Component 内部的文本节点，都在首次解析时就带着准确的语言上下文被浏览器捕获——这要求从路由、数据流、模板编译到 DOM 挂载，全程保持语言元信息不丢失。 
