自定义元素异步加载需绑定生命周期：数据请求在connectedcallback中触发，属性变更通过observedattributes和attributechangedcallback响应，用abortcontroller防竞态，并手动清理资源。
自定义元素实现带生命周期的异步数据加载，核心在于把请求时机、状态响应和清理逻辑，精准绑定到 connectedCallback、attributeChangedCallback 和手动清理机制上——不是靠“等 DOM 挂载完再发请求”，而是靠生命周期回调驱动整个流程。
数据加载必须放在 connectedCallback 里
自定义元素没有 created 或 mounted 这样的 Vue 钩子，connectedCallback 就是它唯一可靠的“首次挂载”信号。浏览器只在元素真正插入主文档流时触发它，且仅一次。
- 不能在
constructor中发起请求：此时 DOM 尚未构建，this.shadowRoot可能为空，也无法读取初始属性值（getAttribute返回null） - 不能依赖外部“DOM ready”事件：自定义元素可能动态插入、延迟渲染或被
v-if控制，必须自己感知挂载 - 典型写法：
connectedCallback() {<br> if (this._loaded) return;<br> this._loadData();<br>}
属性变更触发重载要靠 observedAttributes + attributeChangedCallback
如果组件支持通过 HTML 属性（如 data-id="123"）控制加载目标，就不能只靠首次挂载——后续属性变化也得响应。
- 必须显式声明监听项：
static get observedAttributes() { return ['data-id', 'api-url']; } -
attributeChangedCallback(name, oldValue, newValue)只对这些属性生效，且oldValue在首次解析时为null，所以初始化逻辑仍要放在connectedCallback中补读 - 建议统一处理：在
attributeChangedCallback里调用this._loadData()，但加防抖或条件判断（比如只在newValue !== oldValue && newValue != null时才触发）
加载状态要同步到 DOM，且避免竞态
异步加载不是发个请求就完事，得管理 pending、error、success 状态，并防止旧请求结果覆盖新请求。
- 用私有字段标记加载中：
this._abortController = new AbortController()，每次新请求前this._abortController.abort() - 更新状态时检查是否仍挂载：
if (!this.isConnected) return，避免已移除元素还尝试更新 shadowRoot - 模板中用状态控制 UI：
render() {<br> return this._loading<br> ? html`<div>Loading...</div>`<br> : this._error<br> ? html`<div>Error: ${this._error.message}</div>`<br> : html`<slot>${this._data}</slot>`;<br>}
卸载时主动清理，别指望 disconnectedCallback
disconnectedCallback 不保证执行（比如元素被父节点 innerHTML = '' 清空），也不能作为唯一清理入口。
- 所有定时器、事件监听、fetch 请求都应在发起时绑定清理逻辑，例如：
const controller = new AbortController();<br>fetch(url, { signal: controller.signal })<br> .catch(() => {});<br>this._cleanup = () => controller.abort(); - 在
connectedCallback开头先执行this._cleanup?.()，确保旧资源释放 - 若需长期监听全局事件（如
window.resize），务必在connectedCallback添加、disconnectedCallback移除，但同时保留 fallback 清理（如组件销毁前手动调用）
