影子宿主必须是普通html元素，不能是自闭合元素或未挂载节点；影子根与主dom互不隶属，样式和事件均受封装边界约束。
影子宿主必须是普通 HTML 元素
影子 DOM 不是凭空存在的独立结构，它必须挂载在一个真实的、已存在于主 DOM 树中的元素上——这个元素就是 Shadow Host。它只能是标准 HTML 元素（如 <div>、<code><span></span>、<my-button></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 树之间没有父子关系，也没有共同的祖先节点。
这意味着：
-
document.querySelector('.foo')永远查不到影子树内的元素，哪怕它有 class="foo" -
element.parentNode在影子树内始终为null（因为影子根没有父节点） - 影子树内的
event.target是影子内部节点，但事件冒泡到宿主时，event.composedPath()才能还原完整路径
样式和选择器作用域完全分离
普通元素上的 CSS 规则默认无法穿透到影子树内部，反之亦然。这种隔离不是靠命名约定或 scoped 属性模拟的，而是浏览器原生实现的边界。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑：
- 在影子树里写
:host { color: red; }有效，但写div { color: red; }只影响影子树内 div，不影响宿主外同名元素 - 外部样式用
#host-id .inner选不到影子树里的<div class="inner"> —— 这不是 bug，是设计 <li>想让外部控制内部样式？得显式暴露接口：用 <code>::part(foo)+part="foo"，或::theme(bar)（需配合exportparts） - 监听时设置
composed: true（默认就是 true，多数情况不用显式写） - 使用
event.composedPath()[0]获取原始触发节点 - 避免直接依赖
event.target判断来源，尤其在宿主和影子树都有交互逻辑时
事件冒泡跨过影子边界但目标被重定向
影子树内触发的点击事件，会正常冒泡到宿主元素，再继续向上；但如果不加干预，event.target 始终是宿主元素（而非影子内部的真实触发源），这是为了维持封装性。
需要访问真实目标时，必须：
复杂点在于：影子边界不是“防火墙”，而是“翻译层”——事件能过，但身份信息被重新包装。这点常被忽略，导致事件委托失效或判断错乱。
