shadow dom 是唯一能切断国际化样式污染的机制，因其可隔离 dir/lang 属性影响、禁止外部 css 侵入，但需在 constructor 中立即 attachshadow，并通过 adoptedstylesheets 动态注入语言专属样式。
HTML 国际化本身不带来样式污染，但实际项目中「语言切换」常伴随 DOM 结构变更（如 dir="rtl"、lang="ar"）、CSS 变量重置、字体加载、甚至第三方 i18n 库注入的 class（如 i18n-rtl），这些才是样式隔离失效的真正入口。Shadow DOM 是唯一能切断这些干扰的机制，其他方案（如 CSS Modules、BEM、data 属性）只管类名，不管 dir、lang、:dir(rtl) 或全局字体规则。
为什么 lang 和 dir 会穿透 Shadow DOM？
它们不是样式，而是 HTML 属性，浏览器原生支持在 Shadow DOM 内部响应：lang="ar" 会让内部 :lang(ar) { font-family: "Tajawal" } 生效；dir="rtl" 会触发 :dir(rtl) 伪类——但前提是这些规则写在 shadowRoot 内部的 <style></style> 或 CSSStyleSheet 中。外部 html[dir="rtl"] button 仍无法命中 shadow 内按钮，这是边界保障。
常见错误现象：
- 切换语言后，shadow 内按钮文字被外部
body[lang="zh"] * { font-size: 14px }拉伸变形 - 手动给宿主元素加
lang="he"，但 shadow 内:lang(he)规则没生效——因为规则写在全局<style></style>里，没进 shadowRoot - 使用
i18n-js或react-i18next的useTranslationhook 动态插入<span class="i18n-text"></span>，结果 class 被外部同名规则覆盖
attachShadow({ mode: 'closed' }) 必须在 constructor() 调用
延迟到 connectedCallback() 会导致语言初始化脚本（如 i18next.init()）提前执行，DOM 已挂载在 light DOM，lang 和 dir 属性被外部 CSS 捕获并应用，污染已发生。
实操建议：
- 自定义元素类的
constructor()第一行必须是this.attachShadow({ mode: 'closed' }) - 禁止在
connectedCallback()中调用attachShadow()，否则抛出Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 若需根据语言动态创建 shadowRoot（极少见），先移除旧根：
this.shadowRoot?.remove(); this.attachShadow({ mode: 'closed' })
动态加载多语言 CSS 的正确姿势
不能把 <link rel="stylesheet" href="zh.css"> 直接塞进 shadowRoot.innerHTML——它会加载到全局 document.head，失去作用域。也不能用 fetch().then(css => shadowRoot.innerHTML += <style>${css}</style>)，因为字符串拼接的 <style></style> 不进 CSSOM，后续切换语言时无法热更新。
正确做法：
- 用
DOMParser解析返回的 CSS 字符串，提取所有@import和url()并做路径代理（如将url(./fonts/NotoSansSC.woff2)改为url(/i18n/zh/fonts/NotoSansSC.woff2)） - 创建
CSSStyleSheet实例：const sheet = new CSSStyleSheet(); sheet.replaceSync(cssText); - 注入：
shadowRoot.adoptedStyleSheets = [sheet]（注意 Safari 16.4+、Chrome 73+ 支持） - 切换语言时，直接替换
adoptedStyleSheets数组，浏览器自动重计算样式
:host-context([lang="ja"]) 是唯一可控的语言钩子
W3C 规范只允许 :host-context() 响应宿主祖先的属性，比如宿主外层有 <my-card></my-card>，那么 :host-context([lang="ja"]) { font-family: "Noto Sans JP"; } 才有效。而 :host([lang="ja"]) 是错的——lang 在宿主元素上不生效，它只对 或 有意义。
关键限制：
-
:host-context()只匹配直接祖先或更上层，不跨 shadow boundary，所以必须确保语言属性设在 shadow 宿主的父级（通常是） - 不要写
:host-context([dir="rtl"]) .icon { transform: scaleX(-1); }——transform不可继承，且::slotted()不支持布局属性 - 想让 slot 内容响应语言？得显式在
:host上设font-family: inherit，否则默认回退 Times New Roman
真正麻烦的不是怎么写，而是所有语言相关逻辑（字体加载、RTL 布局翻转、日期格式化）都得在 shadow 内闭环处理——一旦漏掉一个 document.fonts.load() 调用，或忘了用 Intl.DateTimeFormat('ar-EG') 而不是 new Date().toLocaleDateString()，样式和行为就脱节了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
