Shadow DOM 必须通过 attachShadow() 创建，仅 div、span、自定义元素等支持宿主，img/input 等替换元素不支持；重复调用抛 InvalidStateError；innerHTML 直接赋值有 XSS 和样式污染风险，应使用 DOMParser + adoptedStyleSheets 安全注入。

Shadow DOM 不能直接用 HTML 写出来，必须通过 attachShadow() 创建；想靠写个 <shadow-root></shadow-root> 标签来封装交互窗口，根本不会生效。

为什么 attachShadow() 报 “This element does not support shadow roots”

这个错误不是代码写错了，而是宿主元素选错了。浏览器只允许在特定元素上挂载 Shadow DOM：

• <div>、<code><span></span>、自定义元素（如 <modal-dialog></modal-dialog>）可以
• <p></p>、<ul></ul>、<img alt="HTML中Shadow DOM的应用实践：构建隔离的交互窗口" >、<input> 等原生语义化或替换元素**不支持**
• 元素必须已插入 DOM 或至少完成构造（比如在自定义元素 constructor 里调用是安全的）
• 对同一元素重复调用 attachShadow() 会触发 InvalidStateError

怎么安全注入 HTML 并避免样式逃逸和 XSS

直接写 shadowRoot.innerHTML = htmlString 是高危操作：内联 <style></style> 会污染全局 CSS，<script></script> 会在全局上下文执行，且存在 XSS 风险。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 用 DOMParser 解析字符串：const doc = new DOMParser().parseFromString(html, 'text/html')
• 提取所有 <style></style>，转成 CSSStyleSheet 实例后通过 adoptedStyleSheets 注入（Chrome 73+ / Safari 16.4+ 支持）
• 剥离 <script></script> 标签，若需执行，必须显式绑定 this、window、document 到当前 shadowRoot 上下文
• <link rel="stylesheet"> 必须代理请求，返回带 scope 属性的 CSS 文本，再构造 CSSStyleSheet

交互窗口里事件监听和样式怎么写才真正生效

Shadow DOM 天然隔离，document.querySelector() 和 element.children 都看不到内部结构，样式也进不来出不去。

立即学习“前端免费学习笔记（深入）”；

• 查内部按钮：host.shadowRoot.querySelector('button') —— 不是 host.querySelector('button')
• 监听点击事件：必须在 shadowRoot 上绑定，或用 event.composedPath() 捕获冒泡事件
• 外部样式想影响内容？只能用 :host（匹配宿主自身）或 ::slotted(*)（仅限传入 <slot></slot> 的节点），且后者只支持 color、font、background-color 等继承性属性
• 别写 ::slotted(*) { margin: 0; } —— 布局责任该由使用者承担，强行重置反而破坏封装

mode: "closed" 看似安全，实际让调试和维护变困难

mode: "closed" 下，host.shadowRoot 返回 null，连 console 打印都看不到结构，所有调试基本靠猜。

• 日常开发请坚持用 mode: "open"，它提供完整 API 访问能力，同时仍保持样式与 DOM 隔离
• 真正需要防篡改的场景（如微前端子应用），应配合沙箱机制、事件桥接和资源代理，而不是依赖 "closed" 掩耳盗铃
• 注意：adoptedStyleSheets 不处理 @import、相对路径（如 url(./icon.png)）、CSS 变量继承断裂等问题，这些得靠构建时预处理或运行时重写