纯HTML不支持条件渲染，国际化条件渲染需依赖JavaScript或模板引擎；应以currentLang变量而非document.documentElement.lang判断语言；服务端模板可做静态条件渲染，但运行时切换需JS控制显隐；框架中需确保locale响应式且lang属性同步更新。
纯 HTML 本身不支持条件渲染，更不支持“基于国际化状态”的条件判断——lang 属性只是语义标记，不会触发 DOM 显示/隐藏。所谓“国际化条件渲染”，本质是把语言状态当作一个变量，参与 JavaScript 或模板引擎的逻辑分支。
用 data-i18n + JS 判断语言并控制显隐
这是最常见、也最容易出错的做法：很多人以为加了 data-i18n 就自动“条件渲染”了，其实它只负责翻译文本，不控制节点存在与否。
- 显隐必须手动做：
document.querySelectorAll('[data-i18n]').forEach(el => { el.style.display = currentLang === 'zh' ? 'block' : 'none' }) - 别依赖
document.documentElement.lang做判断——它可能还没被 JS 设置完，或被用户手动改过；应以你维护的currentLang变量为准 -
<div data-i18n="login_form"></div>这类空容器，切换语言时需同步el.hidden = currentLang !== 'en'，而不是只改文本 - 如果某段文案只在中文页显示（比如方言提示），不要写
data-i18n，直接用data-lang-show="zh"这类自定义属性，再统一遍历处理
服务端模板里用语言变量做条件（如 EJS、Jinja2）
服务端渲染时，语言是已知且确定的，条件渲染最干净。但要注意：构建时注入 ≠ 运行时可变。
- EJS 中：
<% if (lang === 'zh-Hans') { %><div>简体中文专属说明</div><% } %>—— 这段 HTML 在打包/渲染后就固定了 - 别在模板里写
if (navigator.language)，服务端没有navigator - 若需运行时切换，服务端只能输出多套语言块，靠 JS 控制显隐，不能靠模板重渲染
- BCP 47 格式要严格：用
zh-Hans，不用zh_CN或zh，否则模板引擎可能 fallback 失败
Vue / React 等框架中结合 i18n 库做响应式条件
框架层能真正实现“语言变更 → 条件重计算”，但容易忽略底层约束。
立即学习“前端免费学习笔记（深入）”；
- Vue +
i18n：用v-if="$i18n.locale === 'ja'"是可行的，但注意$i18n.locale必须是响应式数据，不是普通字符串 - React +
react-i18next：别直接写{i18n.language === 'ko' && <KoreanOnlyComponent />}，应封装成 hook 或高阶组件，避免重复判断 - 动态插入的 DOM（如弹窗、懒加载模块）里的条件渲染，必须等 i18n ready 后再挂载，否则首次渲染会漏掉语言判断
-
lang属性仍需手动同步：框架更新文本不等于更新lang="ja"，得额外调用document.documentElement.lang = 'ja'并递归设子元素
最关键的遗漏点：没人检查 lang 属性是否真的影响了字体回退和标点渲染。哪怕条件渲染逻辑全对，<p lang="zh"> 没写对，顿号宽度、引号样式、屏幕阅读器发音照样错。这比“没显示出来”更隐蔽，也更难调试。
