在自定义组件中使用querySelector需限定作用域：启用Shadow DOM时用this.shadowRoot.querySelector()，未启用时用this.querySelector()；避免在connectedCallback过早查询，推荐移至firstUpdated等生命周期钩子，并加存在性判断或使用data-ref属性提升健壮性。
在自定义组件中使用 querySelector 做局部节点查找，关键在于**限定作用域为组件自身影子根（shadow root）或容器元素**，避免污染全局或误查其他组件节点。
确保查询范围限制在组件内部
自定义组件若启用了 Shadow DOM，必须通过 this.shadowRoot 发起查询；否则默认在 this（即元素实例）上无法直接查到内部节点（因为它们不在轻量 DOM 中）。
- 启用 Shadow DOM 时：用
this.shadowRoot.querySelector('.my-btn') - 未启用 Shadow DOM（light DOM）时：可直接用
this.querySelector('.my-btn')，但需确保目标节点是该元素的后代（不是同级或外部） - 为兼容性和明确性，推荐统一用容器元素限定范围，例如：
this.renderRoot?.querySelector('.my-input') || this.querySelector('.my-input')
避免在 connectedCallback 中过早查询
节点可能尚未渲染完成，尤其在异步模板或动态插入内容场景下，querySelector 可能返回 null。
- 若使用同步模板（如 innerHTML 或静态 slot），可在
connectedCallback安全查询 - 若依赖异步数据或框架渲染（如 Lit 的
firstUpdated、Stencil 的componentDidLoad），应移至对应生命周期钩子中执行 - 简单兜底：加一层存在性判断，例如
const el = this.shadowRoot?.querySelector('input'); if (el) { /* use it */ }
用 ref 或属性标记替代硬编码选择器（更健壮）
依赖 class 或 tag 名易受样式重构或结构变动影响。更优雅的方式是通过唯一属性锚定节点：
- 模板中添加
data-ref="submitBtn"或ref="inputField"（部分框架支持） - 查询时写成
this.shadowRoot?.querySelector('[data-ref="submitBtn"]') - 也可封装为方法：
getRef(name) { return this.shadowRoot?.querySelector(`[data-ref="${name}"]`); }
批量查找与类型断言（TypeScript 场景）
使用 querySelectorAll 后，建议显式断言类型以获得更好的编辑器提示和类型安全：
const buttons = this.shadowRoot?.querySelectorAll<htmlbuttonelement>('button.action');</htmlbuttonelement>- 遍历时可安全调用
button.addEventListener等原生方法 - 注意：NodeList 不是数组，需用
Array.from()或for...of迭代
