用 data-component 实现模块级多语言隔离：每个模块包裹在 data-component 根元素内，内部 data-i18n 等指令仅作用于本组件，自动同步 dir/lang 属性，销毁时清除残留，并配合 fallback 语言包、BCP 47 规范及 lang/dir 全链路更新确保语义完整。
怎么用 data-component 配合多语言做模块级隔离
HTML 多语言维护最难的不是换词，而是不同语言下同一模块的 DOM 结构、属性行为、甚至 RTL 布局要保持一致。靠全局 data-i18n 扫描容易漏掉动态插入的节点，也压根不管 dir、lang、placeholder 等语义属性是否同步更新。
真正可控的做法是：每个可复用模块（比如搜索框、用户头像栏、通知弹窗）必须包裹在带 data-component 的根元素里，并把语言切换逻辑封装进该组件作用域内。
-
data-component="search-bar"元素内部所有data-i18n、data-i18n-placeholder、data-i18n-title只对该组件生效，避免跨模块污染 - 组件初始化时读取当前语言码，自动设置
dir="rtl"或dir="ltr"，并同步写入lang属性（如lang="ar"） - 组件销毁或重载时，清除自身所有语言相关属性，不残留旧语言的
lang或dir - 禁止在
data-component外部用 JS 直接操作其子元素文本——这会绕过语言层，导致切换后内容不更新
语言包加载失败时如何避免整页空白
常见错误是 fetch locales/en.json 失败后直接 throw，结果页面所有 data-i18n 标签都留空。这不是“没翻译”，是前端逻辑崩了。
必须把 fallback 机制写死在加载链路里，而不是靠 try/catch 后兜底。
立即学习“前端免费学习笔记（深入）”；
- 首次加载优先尝试 localStorage 缓存的语言包 JSON 字符串（不是语言码，是整个对象），避免网络失败即失效
- fetch 失败后，立即 fallback 到内联的最小化主语言包（例如硬编码
const fallbackEN = { "home.title": "Home", "form.submit": "Submit" }） - 任何 key 查询不到时，返回空字符串 不是
undefined或null，否则innerText = undefined会变成文字 “undefined” - 开发期加一条校验：
Object.keys(langPack).length === 0就触发 console.warn 并强制切到 fallback，别等上线才暴露
为什么 document.documentElement.lang 不能只设一次
很多项目初始化时设了 document.documentElement.lang = 'zh-Hans'，之后语言切换只改文本，结果屏幕阅读器念错、中文字体回退失效、标点间距异常——因为浏览器不继承 lang，它只看每个节点自己的 lang 属性。
切换语言时，必须同步更新三类节点：
- 根节点：
document.documentElement.lang（影响全局字体策略和语音引擎） - 所有显式带
lang的子元素（如博客里的<blockquote lang="ja">），它们不能跟着主语言变，得单独保留原值 - 所有带
data-i18n的元素，如果它们本身没设lang，就补上当前语言码；如果已有lang（比如lang="en"的代码块），则跳过不覆盖
BCP 47 格式必须严格：用 zh-Hans，不用 zh_CN 或 zh ——后者会让 Safari 忽略字体回退规则。
监控多语言状态是否被意外破坏
没人天天手动检查每段文案是否随语言切换而更新，但线上出问题往往是因为某次重构删掉了 data-i18n，或者某个新组件忘了加 data-component，导致语言切换后该区域永远显示英文。
最轻量的监控方式是在页面加载完成后跑一次快照比对：
- 记录当前语言下所有
data-i18n元素的textContent和对应键名，存为 Map - 切换语言后，再次采集，对比相同键名下的文本是否变化（注意排除 placeholder/title 这类属性）
- 发现某键名两次都返回空字符串，或两次内容完全一致（说明没更新），就上报 warning
- CI 流程里加一条检查：扫描所有 HTML 文件，确保每个
data-i18n都在对应语言包 JSON 中有定义，缺失就 fail 构建
真正的坑不在翻译本身，而在 DOM 层面的语言语义是否完整传导——lang、dir、data-i18n、data-component 四者缺一不可，少一个，对残障用户或 SEO 就是硬伤。
