HTML模板技术在实现组件生命周期挂钩的应用

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 规范刻意设计的时序约束。踩坑往往不是代码写错了，而是误以为“写了就能立刻用”。