HTML中Shadow DOM的应用实践：构建隔离的交互窗口

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《HTML中Shadow DOM的应用实践：构建隔离的交互窗口》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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

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

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

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

• 、、自定义元素（如 ）可以

• 、

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

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

  直接写 shadowRoot.innerHTML = htmlString 是高危操作：内联

  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码