Shadow DOM 仅提供样式和 DOM 查询隔离，不隔离 JavaScript；其核心是可控封装与显式定制入口，:host 和 ::slotted() 是唯一合规跨边界样式钩子，动态注入 CSS 需用 adoptedStyleSheets 等方案确保作用域内生效。
Shadow DOM 本身不提供“完全隔离”，它只强制样式和 DOM 查询边界——外部 CSS 进不去，内部 CSS 出不来，但 JS 仍共享全局执行环境，document、window、事件冒泡等照常穿透。所谓“完全隔离”是误读，真正能落地的，是「可控的样式封装 + 显式暴露的定制入口」。
为什么 !important 和全局选择器在 Shadow DOM 里失效
不是权重不够，是浏览器压根不把外部样式规则纳入 shadowRoot 的样式计算流程。你在 <head> 写 button { color: red !important; }，只要按钮在 shadowRoot 里，它就根本看不到这条规则。同理，/deep/、::ng-deep、>>> 已被 Chrome 120+、Firefox 115+ 移除，继续用等于主动放弃兼容性。
:host 和 ::slotted() 是唯一合法的跨边界出口
W3C 规范只认这两个钩子，其余全是单向封闭：
-
:host只匹配宿主元素自身（比如<my-card>这个标签），适合控制容器级样式：:host([disabled]) { opacity: 0.5; }、:host-context(.theme-dark) { background: #1e1e1e; } -
::slotted(p)只匹配传入<slot>的顶层子节点（不递归），且仅支持可继承属性：color、font、line-height、background-color等；禁止设display、margin、width等布局属性 - 别写
::slotted(*)—— 不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担
动态注入第三方 CSS（如 Foundation、Font Awesome）的正确姿势
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。必须确保所有样式仅作用于该 shadow tree：
- 用
DOMParser解析 HTML 字符串，提取<style>和<link>标签内容 - 将 CSS 文本转为
CSSStyleSheet实例（注意：Safari 16.4+、Chrome 73+ 才稳定支持adoptedStyleSheets） - 对
@import、相对路径（如url(./img.png)）、CSS 变量继承链断裂等问题，需提前做资源代理或内联替换 - 若用
innerHTML = '<style>...</style>'替换，旧<style>被销毁，CSSOM 规则丢失，可能引发 FOUC 或闪烁
mode: "open" 是绝大多数场景的合理选择
选 "closed" 并不能真正防住有心人，反而让 element.shadowRoot 返回 null，连 DevTools 都 inspect 不了，调试成本陡增。生产中只有极少数强审计要求的组件库（如银行级 UI 基建）才考虑 "closed"，且必须配套提供明确 API 接口。
立即学习“前端免费学习笔记（深入）”；
重复调用 attachShadow() 会抛出 Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached 错误，务必在 constructor 中检查 this.shadowRoot 是否已存在。
真正容易被忽略的是：Shadow DOM 不隔离 JS 执行环境。内联 <script> 仍会在全局上下文执行，document.body.classList.add('dark') 依然会让整页变暗——这需要额外的沙箱机制，不是 attachShadow 能解决的。
