shadow dom不能构建“微型应用窗口”，仅提供dom和样式隔离；javascript仍全局执行，需手动封装容器、约束脚本、代理资源、处理事件作用域才能实现安全集成。
Shadow DOM 本身不能构建“微型应用窗口”——它只提供 DOM 和样式隔离，不隔离 JavaScript 执行环境、不接管路由、不处理资源加载。所谓“窗口”，必须靠你手动封装容器、注入逻辑、约束行为，否则直接塞 HTML 字符串进去，script 还是跑在全局，document.body 还是能被改。
为什么 attachShadow() 后还是被全局样式污染？
不是 Shadow DOM 失效，是你没切断所有入口。外部样式进不来，但以下情况仍会穿透：
-
<link rel="stylesheet">标签如果没被拦截重写，会直接插入主文档head，规则生效范围仍是全局 -
::slotted(*)或:host-context()主动打开边界，让祖先 class 影响 slot 内容，等于自己拆墙 - 字体、动画（
@font-face、@keyframes）默认不继承进 Shadow DOM，需手动克隆注入<style></style> - 用了
all: initial却忘了重设font-family、line-height等基础属性，导致文字不可读
怎么安全注入第三方 HTML 片段而不 XSS 或样式逃逸？
直接赋值 shadowRoot.innerHTML = htmlString 是高危操作：内联 <script></script> 执行在全局上下文，<style></style> 不进 CSSOM，onclick 属性触发也绕过 Shadow boundary。
- 用
DOMParser解析：const doc = new DOMParser().parseFromString(html, 'text/html') - 剥离所有
<script></script>标签（含src），缓存内容或 URL，后续在沙箱中执行（绑定this、window到shadowRoot） - 提取
<style></style>，创建document.createElement('style')并设置textContent，再appendChild到shadowRoot -
<link rel="stylesheet">必须代理请求，返回带scope属性的 CSS 文本，再构造CSSStyleSheet实例并赋给shadowRoot.adoptedStyleSheets
事件监听和 DOM 查询为什么总找不到元素？
不是代码写错，是作用域搞混了。Shadow DOM 天然屏蔽 document 和宿主元素的直连查询。
- 查内部按钮：
host.shadowRoot.querySelector('button')—— 不是host.querySelector('button') - 监听点击：
shadowRoot.addEventListener('click', handler)，或监听冒泡事件后用event.composedPath()定位目标 -
slot内容变动要等slotchange事件，再调用slot.assignedNodes({ flatten: true })获取真实节点 - 别依赖
element.children遍历，它只返回 slot “壳”，看不到影子树里的结构
mode: "closed" 真的更安全吗？
不。它只是让 host.shadowRoot 返回 null，对 JS 隔离、样式防污染、XSS 防御毫无帮助。
- 反射仍可获取：
Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'shadowRoot').get.call(host) - DevTools 在多数浏览器中仍可展开查看结构（尤其 Chromium 128+）
- 测试、Linter、CI 流程无法 inspect，调试全靠猜，维护成本陡增
- 真正起作用的是封装纪律：样式写在 shadow 内、禁用全局 class 依赖、事件不监听
document、挂载点必须是shadowRoot
最易被忽略的一点：Shadow DOM 不是“开箱即用”的沙箱。你得自己控制 script 执行上下文、手动同步 history 状态、代理所有跨域资源请求——否则所谓的“窗口”，不过是披着隔离外衣的全局污染源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
