影子宿主必须是普通HTML元素，不能是自闭合元素或未挂载节点；影子根与主DOM互不隶属，样式和事件均受封装边界约束。
影子宿主必须是普通 HTML 元素
影子 DOM 不是凭空存在的独立结构，它必须挂载在一个真实的、已存在于主 DOM 树中的元素上——这个元素就是 Shadow Host。它只能是标准 HTML 元素（如 <div>、<span>、<my-button>），不能是文本节点、注释节点或 DocumentFragment。
常见错误现象：attachShadow() 调用失败并抛出 DOMException: Failed to execute 'attachShadow' on 'Element': This element cannot host shadow root，通常是因为：
- 试图在
<img>、<input>、<meta>等**自闭合/不可承载子节点的元素**上调用 - 在未插入文档的临时节点（如
document.createElement('div')但尚未appendChild）上调用（部分浏览器会允许，但行为不一致） - 在已被移除或处于
display: none的元素上调用（不影响功能，但无实际渲染意义）
影子根（shadowRoot）和普通 DOM 节点互不隶属
shadowRoot 是一个 ShadowRoot 实例，它既不是 Document，也不是普通 Element，而是一个继承自 DocumentFragment 的特殊节点类型。它与主 DOM 树之间没有父子关系，也没有共同的祖先节点。
这意味着：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
document.querySelector('.foo')永远查不到影子树内的元素，哪怕它有 class="foo" -
element.parentNode在影子树内始终为null（因为影子根没有父节点） - 影子树内的
event.target是影子内部节点，但事件冒泡到宿主时，event.composedPath()才能还原完整路径
样式和选择器作用域完全分离
普通元素上的 CSS 规则默认无法穿透到影子树内部，反之亦然。这种隔离不是靠命名约定或 scoped 属性模拟的，而是浏览器原生实现的边界。
容易踩的坑：
- 在影子树里写
:host { color: red; }有效，但写div { color: red; }只影响影子树内 div，不影响宿主外同名元素 - 外部样式用
#host-id .inner选不到影子树里的<div class="inner">—— 这不是 bug，是设计 - 想让外部控制内部样式？得显式暴露接口：用
::part(foo)+part="foo"，或::theme(bar)（需配合exportparts）
事件冒泡跨过影子边界但目标被重定向
影子树内触发的点击事件，会正常冒泡到宿主元素，再继续向上；但如果不加干预，event.target 始终是宿主元素（而非影子内部的真实触发源），这是为了维持封装性。
需要访问真实目标时，必须：
- 监听时设置
composed: true（默认就是 true，多数情况不用显式写） - 使用
event.composedPath()[0]获取原始触发节点 - 避免直接依赖
event.target判断来源，尤其在宿主和影子树都有交互逻辑时
复杂点在于：影子边界不是“防火墙”，而是“翻译层”——事件能过，但身份信息被重新包装。这点常被忽略，导致事件委托失效或判断错乱。
