HTML文档样式封装与隔离技巧

先说一个核心判断：Shadow DOM 是真正能生效的样式隔离机制，没有调用 attachShadow()，就没有隔离可言。外部样式表在浏览器计算阶段就直接跳过跨 boundary 匹配，即便你写 button { color: red !important }，对 Shadow 内部的按钮也完全无效——不是权重不够，而是根本看不见。而 :host 和 ::slotted() 是 W3C 规范里唯二允许"穿墙"的方式。

Shadow DOM 是唯一真正生效的样式隔离机制

不启用 attachShadow()，所谓的"封装"只是类名前缀或 scoped 属性的自我安慰。浏览器在样式计算阶段就直接跳过跨 boundary 匹配，外部 button { color: red !important } 对 Shadow 内按钮完全无效——不是权重不够，是根本看不见。

常见的错误现象包括：document.querySelector('.shadow-inner-btn') 查不到节点、font-family 不继承、动态改 style.textContent 没反应。这些都不是写法问题，而是没走对路径。

• attachShadow({ mode: 'open' }) 调试友好但生产风险高；mode: 'closed' 才是微前端等场景的强制要求（element.shadowRoot 返回 null 是设计使然，不是 bug）
• 已被 Chrome 120+、Firefox 115+ 彻底移除，BEM 类名无法阻止全局规则穿透
• 宿主元素必须已插入 DOM 才能调用 attachShadow()，否则抛 InvalidStateError

注入样式必须进入 CSSOM，不能拼字符串

写 shadowRoot.innerHTML = '' 看着省事，实际让 被当作文本节点解析，根本不进入 CSSOM，后续 JS 修改完全失效。

正确做法是创建真实 元素并 append 到 shadowRoot，或者用现代 API：

• 用 document.createElement('style') + shadowRoot.appendChild(style)
• 用 new CSSStyleSheet() 实例，再赋值给 shadowRoot.adoptedStyleSheets = [sheet]（Chrome 73+/Safari 16.4+ 支持）
• 禁止把 直接塞进 innerHTML——它会加载到主文档 ，彻底失去隔离

:host 和 ::slotted() 是唯二合法的跨边界方式

W3C 规范只保留这两个伪类作为跨 boundary 接口。滥用 ::slotted(*) 或试图用 :host div 选内部子元素，等于放弃封装意义。

关键限制必须清楚：

• :host([disabled]) 只响应宿主元素自身属性变更；:host-context(.dark) 才能响应祖先
• ::slotted(p) 只作用于被 投影进来的顶层
  ，且仅支持可继承属性（color、font、background-color），禁设 margin、display
• 想让 slot 内容继承字体？得显式写 :host { font-family: inherit; }，否则默认回退 Times New Roman

第三方 HTML 注入必须使用 DOMParser 分治处理

直接 shadowRoot.innerHTML = htmlString 是危险操作： 逃逸到全局、 在 window 上执行、 加载进主文档——样式污染和 XSS 风险同时发生。

安全链路是：

• 用 new DOMParser().parseFromString(html, 'text/html') 解析字符串
• 遍历 doc.body.childNodes，对每个 提取内容转 CSSStyleSheet 后注入 adoptedStyleSheets
• 拦截 ，fetch 后在沙箱中重绑定 this/window/document 执行
• 剥离内联 ，避免意外执行

最容易被忽略的是：所有样式卸载必须靠 DOM 移除整块子树，而不是手动删 标签——浏览器重建 CSSOM 才算真正清理干净。