自修复组件指组件在js报错、模板求值失败或属性非法时能捕获异常、清空错误状态并降级渲染，而非依赖html语法自动补全；其核心是在connectedcallback中用try/catch包裹初始化逻辑，并以内联样式提供最小可用错误ui。
自修复不是自动补全标签，而是组件自己扛住错误
HTML 本身没有“自修复”能力，所谓自修复组件，是指当内部 JS 报错、模板求值失败或属性非法时，组件能捕获异常、清空错误状态、降级渲染，而不是让整个页面白屏或卡死。编辑器里的 Auto Close Tag 或 tidy-html5 补闭合标签，和这个完全不是一回事——那是语法预处理，不是运行时容错。
关键判断点：如果你的组件一出错就中断渲染、控制台报 TypeError: Cannot read property 'xxx' of undefined，说明它没做任何兜底；而真正自修复的组件，哪怕传入 null 或空字符串，也能显示一个灰色占位框或文案提示。
- 所有可能触发 DOM 操作或模板插值的逻辑（比如
this.shadowRoot.innerHTML = template、JSON.parse(this.getAttribute('data'))）必须包裹在try/catch中 - 错误处理不能只写在
attributeChangedCallback里——它不响应初始属性，首次渲染时根本不会执行 - 降级 UI 必须内联基础样式，不能依赖宿主页面的 CSS 变量，否则
color: var(--error-color)会变成默认黑色甚至透明
connectedCallback 是唯一可靠入口点
Web Components 的生命周期里，只有 connectedCallback 是 DOM 真正挂载后、且每次插入文档都会触发的钩子。constructor 太早（DOM 未就绪），attributeChangedCallback 太晚（只管变更，不管初始化），disconnectedCallback 和修复无关。
正确做法是把所有初始化逻辑——读属性、解析 JSON、生成 HTML、append 到 shadowRoot——全部塞进 connectedCallback 的 try 块里，并在 catch 中执行三件事：
- 调用
this.shadowRoot.innerHTML = ''清空残留节点（避免旧内容和错误 UI 共存） - 用内联 style 写一个最小可用的错误提示，比如
<div style="padding:8px;color:#a00;background:#fee">组件加载失败</div> - 可选：往控制台打一条带组件名的警告，方便定位问题来源
template + cloneNode 是最安全的渲染方式
直接拼接字符串模板（如 shadow.innerHTML = `<div>${name}</div>`）风险极高：一旦 name 是 undefined 或含非法字符，就会导致 JS 执行中断，且无法被 catch 捕获（因为是模板字符串求值阶段崩溃）。更稳妥的方式是用 <template></template> 标签定义结构，再通过 content.cloneNode(true) 安全克隆。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
但注意：cloneNode 不会执行脚本，也不解析表达式，所以你得手动填充数据。常见模式：
- 在
<template></template>里写占位符，如<h3 data-bind="name"></h3> - 克隆后遍历所有
[data-bind]节点，用setAttribute或textContent注入值 - 整个过程包在 try 里，任意一步失败就跳到降级 UI
这样即使 name 是 Symbol() 或函数，也不会炸，只会跳过该字段填充。
自修复组件没法覆盖所有错误类型
别指望靠 JS 错误边界解决一切。以下几类问题，组件自身无能为力：
- CSS 解析错误（比如
color: #ffg;）——浏览器直接忽略整条声明，不抛异常 - HTML 结构错位（比如
<div><p><span>文本</span></p></div>）——由 HTML 解析器自动修复，不走 JS 流程 - 资源加载失败（
<img src="404.jpg">）——需监听onerror单独处理，和组件逻辑无关 - 未捕获的 Promise reject（比如 fetch 失败没加
.catch()）——会冒泡到window.onunhandledrejection，不在组件作用域内
真正的自修复，只聚焦在“组件自己可控的 JS 执行路径”上：属性解析、模板克隆、DOM 插入、事件绑定。其它环节，该报错就报错，强行兜底反而掩盖真实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
