connectedCallback中查不到子元素是因为<template>内容解析是异步的，需显式克隆插入或用requestAnimationFrame延后查询；attributeChangedCallback需声明observedAttributes；slot内容注入晚于connectedCallback，应监听slotchange事件。
connectedCallback 里用 <template> 插入内容后为什么查不到子元素
因为 connectedCallback 只保证自定义元素自身已挂载，不保证 <template> 内容已被克隆、解析并插入到 shadowRoot 中。浏览器解析模板是异步的，直接 this.shadowRoot.querySelector('button') 会返回 null。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保在
connectedCallback中显式执行模板克隆与插入：先const t = this.shadowRoot.querySelector('template').content.cloneNode(true)，再this.shadowRoot.appendChild(t) - 若需立即操作子节点，用
requestAnimationFrame(() => { /* query here */ })延后一帧——这是最轻量且兼容性好的兜底方式 - 避免把模板逻辑塞进
constructor：此时this.shadowRoot还没创建，querySelector必然失败
attributeChangedCallback 不触发？检查 observedAttributes 是否声明且匹配
attributeChangedCallback 不是“监听所有属性”的默认钩子，它完全依赖静态 getter observedAttributes 的显式声明。漏掉或写错，变更就静默失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写成
static get observedAttributes() { return ['data-id', 'disabled']; }—— 返回字符串数组，不能是对象或单个字符串 - HTML 属性名必须严格一致：
data-id≠datasetid，disabled≠Disabled - 只响应
setAttribute()或初始 HTML 解析，this.disabled = true是 property 操作，不触发该回调 - 首次渲染时
oldValue是null，不是undefined，判空逻辑要写对
template + slot 组合下，slotchange 事件和生命周期钩子怎么协同
<slot> 的内容注入时机晚于 connectedCallback，所以依赖 slot 内容的逻辑不能全放在 connectedCallback 里执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
slotchange事件：在connectedCallback中为<slot>元素添加addEventListener('slotchange', ...) - 不要在
slotchange回调里反复调用slot.assignedNodes()而不做防抖——DOM 变动可能触发多次 - 若需等 slot 内容稳定后再初始化 UI，可结合
requestAnimationFrame+slot.assignedNodes({ flatten: true })判断是否非空 -
disconnectedCallback中记得移除slotchange监听器，否则可能造成内存泄漏
constructor 中能提前创建 shadowRoot 吗？可以，但别碰 DOM
可以在 constructor 里调用 this.attachShadow({ mode: 'open' })，这是安全的；但此时任何子节点都还没存在，更别说查询或渲染了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- ✅ 允许做的事：声明私有变量（
this._timer = null）、绑定方法（this.handleClick = this.handleClick.bind(this)）、创建 shadowRoot - ❌ 禁止做的事：
this.shadowRoot.innerHTML = ''、this.querySelector('input')、fetch()、addEventListener（没有父节点，事件无法冒泡） - ⚠️ 注意：
attachShadow后仍不能访问 light DOM 子节点，它们在connectedCallback之后才被 slot 分发
真正容易被忽略的是：template 内容的解析延迟、slot 的惰性分发、以及 attribute 和 property 的语义差异——这些不是浏览器 Bug，而是 Web Components 规范刻意设计的时序约束。踩坑往往不是代码写错了，而是误以为“写了就能立刻用”。
