Shadow DOM必须通过JavaScript的attachShadow()创建，仅部分元素（如div、自定义元素）支持挂载，且需确保元素已存在于DOM中；重复调用或对不支持元素调用会抛出DOMException错误。
Shadow DOM 不是“用 HTML 写出来”的东西，它必须通过 JavaScript 调用 attachShadow() 创建；直接在 HTML 里写 <shadow-root> 或类似标签完全无效。
为什么 attachShadow() 会报 “This element does not support shadow roots”
常见错误现象就是调用失败并抛出这个 DOMException。根本原因是选错了宿主元素 —— 只有部分元素支持挂载 Shadow DOM：
-
<div>、<span>、自定义元素（如<my-button>）可以 -
<img>、<input>、<p>、<ul>等原生替换元素或语义化容器**不支持** - 必须确保元素已存在于 DOM 中，或至少已完成构造（比如在自定义元素
constructor里调用是安全的） - 重复调用
attachShadow()到同一元素会触发InvalidStateError
怎么安全地把 HTML 字符串注入 Shadow DOM
不能直接写 shadowRoot.innerHTML = htmlString，否则内联 <script> 和 <style> 会逃逸到全局作用域，带来样式污染和 XSS 风险。
- 用
DOMParser解析字符串，再逐个处理节点：const doc = new DOMParser().parseFromString(html, 'text/html') - 提取所有
<style>，转成CSSStyleSheet实例后通过adoptedStyleSheets注入（Chrome 73+ / Safari 16.4+ 支持） - 剥离
<script src="...">，手动 fetch +eval（注意绑定this、window到当前shadowRoot） -
<link rel="stylesheet">必须代理请求，返回带 scope 属性的 CSS 文本，再构造CSSStyleSheet
怎么查、怎么改 Shadow DOM 里的元素
Shadow DOM 天然隔离，document.querySelector() 和 element.children 都看不到内部结构。
立即学习“前端免费学习笔记（深入）”；
- 查内部按钮：
host.shadowRoot.querySelector('button')—— 不是host.querySelector('button') - 监听点击事件：必须在
shadowRoot上绑定，或利用event.composedPath()捕获冒泡事件 - 修改 slot 投影内容？得等
slotchange事件触发后，再调用slot.assignedNodes({ flatten: true })获取真实节点 -
mode: 'closed'时，host.shadowRoot返回null，调试基本靠猜；日常开发请坚持用'open'
样式怎么写才真正生效
Shadow DOM 内部样式不会泄露，但外部样式也进不来 —— 这不等于你可以不写样式。关键靠三个伪类：
-
:host：匹配宿主元素自身，比如<my-card>上加class="large"，可用:host(.large) { width: 300px; } -
::slotted(*)：控制被<slot>投影进来的节点样式，常用来重置margin、padding -
:host-context(...)：根据宿主外层环境（如body.dark）动态切换主题，但兼容性有限，慎用 - Webpack/Vite 的 CSS Modules 生成的 scoped class 名，在 Shadow DOM 里默认不生效，需显式包裹
:host > .xxx或:host .xxx
真正难的不是创建 Shadow DOM，而是让动态脚本执行、样式继承、资源加载、事件流全部在隔离边界内保持一致 —— 这些细节一旦漏掉一个，就可能在某个浏览器或子应用更新后突然崩掉。
