在 Shadow DOM 内部查询节点必须在 shadowRoot 上调用 querySelector/QuerySelectorAll，需先确保 host.shadowRoot 存在且 mode 为 open；动态内容需在 connectedCallback 后查询或用 MutationObserver 监听。
在 Shadow DOM 内部查询节点，核心是**必须在 Shadow Root 上调用查询方法**，不能直接使用全局 document.querySelector。因为 Shadow DOM 是封闭的边界，外部文档无法穿透访问其内部节点（除非显式设为 open 且你持有 root 引用）。
确保你有有效的 Shadow Root 引用
只有获取到元素的 shadowRoot，才能在其内部执行查询。注意：如果组件使用 mode: "closed"，则无法从外部访问 shadowRoot（返回 null）。
- 创建 shadow root 时建议用
mode: "open"（默认值），便于调试和操作 - 通过
element.shadowRoot获取（element是已附加 shadow DOM 的宿主元素） - 若不确定是否已连接或已创建，可加判断：
if (host.shadowRoot) { ... }
使用 shadowRoot.querySelector / querySelectorAll
这是最常用、语义最清晰的方式。所有标准选择器语法均支持，包括类名、ID、属性、伪类等（但不支持跨 shadow 边界的组合器如 div ::slotted(p) 需用 ::slotted() 专用伪元素）。
-
host.shadowRoot.querySelector('.item')—— 返回第一个匹配元素 -
host.shadowRoot.querySelectorAll('button[data-action]')—— 返回 NodeList - 支持
:host和:host-context()等影子 CSS 伪类，但仅用于样式；JS 查询中不可用
注意事件委托与动态内容的处理
Shadow DOM 内部节点可能异步渲染（如 Lit、Stencil 组件），直接查可能返回空。需确保查询时机正确：
立即学习“Java免费学习笔记（深入）”；
- 在
connectedCallback（自定义元素）或firstUpdated（Lit）后查询 - 对动态插入的内容，可用
MutationObserver监听shadowRoot变化 - 避免在
constructor中查询 —— 此时shadowRoot尚未创建
需要跨 slot 查询？用 assignedElements() 或 querySelector('::slotted(...)')
::slotted() 是 CSS 伪元素，JS 中不能直接用它查询，但可通过以下方式间接处理插槽内容：
- 对
<slot></slot>元素调用slotEl.assignedElements()获取实际分发的节点 - 若想查被 slot 接收的某个特定子类型，先取
assignedElements()，再用Array.prototype.filter筛选 - 注意：插槽内容属于 light DOM，不属于 shadow DOM 内部，因此不能用
shadowRoot.querySelector直接命中
