html组件化开发中异常必须分层处理：customelements.define()阶段错误需构建期eslint检查；connectedcallback中fetch等异步操作须加超时与降级ui；attributechangedcallback须try/catch并设默认值；全局错误应通过组件cid关联上下文并按职责分级上报或吞掉。
HTML组件化开发中，异常不处理好，轻则局部白屏、交互失灵，重则整个customElement注册失败、后续组件无法挂载——这不是小概率事件，而是资源加载、生命周期钩子、属性解析等环节的常态风险。
customElement定义阶段的SyntaxError与TypeError捕获
浏览器在调用customElements.define()时，若类定义语法错误、继承非法或observedAttributes含非法字符串，会直接抛出SyntaxError或TypeError，且无法被try/catch包裹（因是宏任务注册行为）。这类错误一旦发生，后续同名或依赖该组件的代码全部失效。
- 必须在构建阶段用ESLint插件
@open-wc/eslint-plugin检查static get observedAttributes()返回值是否为字符串数组 - 避免在
constructor中执行异步操作或DOM访问；若需初始化状态，改用connectedCallback并加if (this.isConnected)守卫 - 对第三方组件包，用
customElements.get('x-foo') === undefined做运行时存在性校验，而非直接实例化
connectedCallback中网络/渲染异常的降级兜底
connectedCallback是组件首次挂载的真实入口，也是最常出现fetch失败、import('./chunk.js') rejected、innerHTML解析崩溃的环节。此时不能让组件留空或报错中断，而应主动降级。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
Promise.race([fetch(), new Promise(r => setTimeout(r, 8000))])替代无超时的fetch，防止长期pending阻塞渲染 - 降级UI建议用纯HTML字符串注入（如
this.innerHTML = '<div class="error">加载失败</div>'），避免再触发render()或依赖未就绪的模板引擎 - 若组件依赖外部CSS，应在
<link rel="stylesheet">上监听onerror，失败后立即remove()并插入内联基础样式
attributeChangedCallback里的类型校验与静默容错
当用户写<x-chart data="[1,2,3]"></x-chart>，但实际传入data="invalid-json"时，attributeChangedCallback里JSON.parse()会抛SyntaxError。这类错误不会冒泡到全局，但会导致组件状态停滞。
- 所有属性解析必须包裹
try/catch，失败时设默认值（如this._data = []）而非throw - 对布尔属性（如
disabled），不要依赖attr === 'true'，而用this.hasAttribute('disabled')判断 - 避免在
attributeChangedCallback中触发dispatchEvent或requestUpdate，防止循环更新；状态变更统一收口到update或performUpdate
全局错误边界与组件级error事件透传
原生Custom Elements不提供类似React ErrorBoundary的机制，但可通过window.addEventListener('error')和unhandledrejection捕获部分异常，关键是要把错误上下文关联到具体组件。
- 在
constructor中给每个实例打唯一id（如this.__cid = Math.random().toString(36).substr(2, 9)），并在error事件中通过event.target?.closest('[data-cid]')反查来源组件 - 组件内部可自定义
dispatchEvent(new CustomEvent('x-error', { detail: { error, phase: 'render' } }))，由父容器监听并决定是否替换子树 - 对
shadowRoot内错误，需在connectedCallback中手动添加shadowRoot.addEventListener('error', ...)，因影子DOM错误不会冒泡到light DOM
真正难的不是写try/catch，而是判断哪一层该吞掉错误、哪一层该上报、哪一层该触发UI降级——这取决于组件职责：原子组件（如x-input）应静默容错，复合组件（如x-dashboard）才该暴露error事件供业务层决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
