shadow dom是唯一真正生效的样式隔离机制，未调用attachshadow()则无隔离；外部样式因浏览器在计算阶段跳过跨boundary匹配而完全无效，: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） -
<style scoped></style>已被 Chrome 120+、Firefox 115+ 彻底移除，BEM 类名无法阻止全局规则穿透 - 宿主元素必须已插入 DOM 才能调用
attachShadow()，否则抛InvalidStateError
注入样式必须进 CSSOM，不能拼字符串
写 shadowRoot.innerHTML = '<style>.btn { color: blue }</style>' 看似省事，实则让 <style></style> 被当作文本节点解析，不进入 CSSOM，后续 JS 修改完全失效。
正确做法是创建真实 <style></style> 元素并 append 到 shadowRoot，或使用现代 API：
- 用
document.createElement('style')+shadowRoot.appendChild(style) - 用
new CSSStyleSheet()实例，再赋值给shadowRoot.adoptedStyleSheets = [sheet]（Chrome 73+/Safari 16.4+ 支持） - 禁止把
<link rel="stylesheet">直接塞进 innerHTML——它会加载到主文档，彻底失去隔离
:host 和 ::slotted() 是唯二合法穿墙方式
W3C 规范只保留这两个伪类作为跨 boundary 接口。滥用 ::slotted(*) 或试图用 :host div 选内部子元素，等于放弃封装意义。
关键限制必须清楚：
-
:host([disabled])只响应宿主元素自身属性变更；:host-context(.dark)才能响应祖先 -
::slotted(p)只作用于被<slot></slot>投影进来的顶层<p></p>，且仅支持可继承属性（color、font、background-color），禁设margin、display - 想让 slot 内容继承字体？得显式写
:host { font-family: inherit; }，否则默认回退 Times New Roman
第三方 HTML 注入必须用 DOMParser 分治处理
直接 shadowRoot.innerHTML = htmlString 是危险操作：<style></style> 逃逸到全局、<script></script> 在 window 上执行、<link> 加载进主文档——样式污染和 XSS 风险同时发生。
安全链路是：
- 用
new DOMParser().parseFromString(html, 'text/html')解析字符串 - 遍历
doc.body.childNodes，对每个<style></style>提取内容转CSSStyleSheet后注入adoptedStyleSheets - 拦截
<script src="..."></script>，fetch 后在沙箱中重绑定this/window/document执行 - 剥离内联
<script></script>，避免意外执行
最容易被忽略的是：所有样式卸载必须靠 DOM 移除整块子树，而不是手动删 <style></style> 标签——浏览器重建 CSSOM 才算真正清理干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
