不能挂载 Shadow DOM 的元素包括 、、、、 等原生语义化或替换元素；仅 、 和自定义元素合法，且须已构造完成并存在于 DOM 中。

哪些元素根本不能挂载 Shadow DOM

调用 attachShadow() 时抛出 "This element does not support shadow roots"，不是代码写错了，而是宿主元素不合法。浏览器只允许在特定元素上挂载：

• <div>、<code><span></span>、自定义元素（如 <my-button></my-button>）可以
• <img alt="HTML Shadow DOM的应用边界：哪些场景不适合使用" >、<input>、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<ul></ul>、<table> 等原生语义化或替换元素**一律不支持** <li>元素必须已存在于 DOM 中，或至少完成构造（比如在自定义元素 <code>constructor 里调用是安全的）
• 重复调用 attachShadow() 到同一元素会触发 InvalidStateError

常见翻车点：试图给一个 <p></p> 标签加 shadow，或者在 Vue/React 的 mounted/useEffect 之前就执行挂载 —— 这些都直接失败，没商量余地。

JS 隔离需求强的场景请绕开 Shadow DOM

Shadow DOM **不提供 JS 执行环境隔离**，它只隔离 DOM 结构和 CSSOM。如果你需要子应用完全互不干扰的全局变量、window 属性、事件监听器或模块作用域，它做不到。

• 微前端中，子应用若依赖独立 React 或 Vue 实例，且版本与主应用冲突，Shadow DOM 无法阻止 window.React 被覆盖
• 子应用内动态 eval() 或 new Function() 生成的代码仍运行在全局上下文，可能污染主应用
• 第三方 SDK（如埋点脚本）若主动遍历 document 或监听 document 级事件，它看不到 shadow 内部节点，但能照常操作外部 DOM —— 隔离是单向的

这类需求，<iframe></iframe> 仍是唯一可靠选择，哪怕通信麻烦、SEO 差、资源开销高。

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

需要深度继承用户代理样式的组件慎用

Shadow DOM 不自动继承父级的 font-family、color、line-height 等可继承属性 —— 它们来自 user agent stylesheet，而浏览器默认**不把它们注入 shadow 内部**。

• 比如主页面设了 body { font-family: "SF Pro Text"; }，shadow 内的 <p></p> 会回退到系统默认字体，不是继承过来的
• 你得显式写 :host { font-family: inherit; } 或在 shadowRoot 上设 style="font-family: inherit"
• 更麻烦的是 <input>、<select></select> 这类原生控件：它们的 user agent 样式（如 border、padding、appearance）**不会被 inherit 覆盖**，必须手动重置

这意味着：想封装一个“看起来和原生控件完全一致”的 shadow 组件，工作量远超预期，且容易在 Safari/Edge 上出现细微差异。

CSS 模块化工具（如 css-loader?modules）与 Shadow DOM 天然不兼容

Webpack/Vite 项目若启用了 CSS Modules，生成的 class 名（如 Button_button__abc123）默认只作用于 light DOM，**不会自动适配 shadow 边界**。

• 你不能直接在 shadowRoot 里写 <button class="Button_button__abc123"></button> 并指望样式生效 —— 外部 CSS 规则进不去
• 正确做法是把 scoped class 放进 shadow 内部的 <style></style> 或 CSSStyleSheet，或用 :host 包裹规则，例如：:host .Button_button__abc123 { ... }
• 否则，要么放弃 CSS Modules，要么改构建配置，额外增加 postcss 插件做 scope 注入

这个坑在团队已有成熟 CSS Modules 流程时尤其明显 —— 不是 Shadow DOM 不能用，而是它要求你重构样式交付链路。