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

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

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

• 、、自定义元素（如 ）可以
• 、、
  、
  、 等原生语义化或替换元素**一律不支持**
  元素必须已存在于 DOM 中，或至少完成构造（比如在自定义元素 constructor 里调用是安全的）
  重复调用 attachShadow() 到同一元素会触发 InvalidStateError

  常见翻车点：试图给一个

  标签加 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 —— 隔离是单向的

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

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

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

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 比如主页面设了 body { font-family: "SF Pro Text"; }，shadow 内的
    会回退到系统默认字体，不是继承过来的
  • 你得显式写 :host { font-family: inherit; } 或在 shadowRoot 上设 style="font-family: inherit"
  • 更麻烦的是 、 这类原生控件：它们的 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 里写 并指望样式生效 —— 外部 CSS 规则进不去
  • 正确做法是把 scoped class 放进 shadow 内部的 或 CSSStyleSheet，或用 :host 包裹规则，例如：:host .Button_button__abc123 { ... }
  • 否则，要么放弃 CSS Modules，要么改构建配置，额外增加 postcss 插件做 scope 注入

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