<p>直接序列化 innerHTML 会丢失状态，因为 HTML 模板不保存运行时状态（如 input 值、checkbox 勾选、shadowRoot 内容等），这些状态仅存于 DOM 属性或组件实例中，需手动采集并注入 data-snapshot-* 属性才能完整快照。</p>
为什么直接序列化 innerHTML 会丢失状态
HTML 模板本身不保存组件的运行时状态，比如 input 的当前值、select 的选中项、checkbox 的勾选状态、textarea 光标位置，甚至自定义元素的私有属性。直接取 innerHTML 或 outerHTML 只能得到初始模板结构，不是快照。
- 浏览器渲染后，表单控件的状态存在 DOM 节点的
value、checked、selectedOptions等属性上，而非 HTML 字符串中 -
contenteditable元素的编辑内容可能已脱离原始 HTML，靠innerText或innerHTML无法还原光标和格式 - Web Components（如
custom-element）内部状态通常封装在shadowRoot或实例字段里，外部 HTML 序列化完全不可见
手动采集关键状态并注入到模板中的实操方式
核心思路：遍历目标组件内所有可交互节点，读取其真实状态，再以 data 属性或注释形式“打桩”回 HTML 字符串中，后续可据此还原。
- 对
input[type="text"]、textarea，读取el.value，写入data-snapshot-value - 对
input[type="checkbox"]、input[type="radio"]，用el.checked，存为data-snapshot-checked - 对
select，遍历el.options，标记data-snapshot-selected="true"在对应option上 - 避免覆盖原始 HTML 属性，统一用
data-snapshot-*命名空间，防止与业务逻辑冲突
示例片段：
function snapshotElement(el) {
const clone = el.cloneNode(true);
clone.querySelectorAll('input, select, textarea').forEach(node => {
if (node.type === 'checkbox' || node.type === 'radio') {
node.dataset.snapshotChecked = node.checked.toString();
} else if (node.tagName === 'SELECT') {
node.querySelectorAll('option').forEach(opt => {
opt.dataset.snapshotSelected = opt.selected.toString();
});
} else {
node.dataset.snapshotValue = node.value;
}
});
return clone.outerHTML;
}
还原快照时需绕过浏览器默认行为
单纯把带 data-snapshot-* 的 HTML 插入页面，浏览器不会自动应用这些状态——它只解析初始属性，不执行数据驱动逻辑。
立即学习“前端免费学习笔记（深入）”；
- 插入后必须主动遍历，读取
dataset.snapshot*并赋值给对应 DOM 属性，例如el.value = el.dataset.snapshotValue - 对
checkbox要设el.checked = el.dataset.snapshotChecked === 'true'，不能只设属性（setAttribute('checked', ...)不生效） - 如果组件依赖框架（如 Vue 的
v-model），快照还原必须在框架接管前完成，否则会被响应式系统覆盖；常见做法是先移除data-v-*或_v-等框架标识再还原 - 注意事件监听器不会被 clone 带走，快照仅保存状态，不保存行为；还原后需重新绑定或触发一次
input/change事件以通知上层
Shadow DOM 组件的快照难点在哪
标准 HTML 序列化（outerHTML）对 shadowRoot 完全无效，返回空字符串或不含 shadow 内容。这是最常被忽略的断点。
- 必须显式访问
el.shadowRoot，再调用其innerHTML或递归序列化（含slot分发内容） - shadow 内部的表单状态同样需要单独采集，不能依赖外层遍历
- 若使用
openmode shadow，可直接操作；但closedmode 下无法读取shadowRoot，此时快照只能依赖组件暴露的getState()方法，没有通用解法 - 第三方 Web Component（如 Ionic、Shoelace）往往提供
saveState()/restoreState()接口，优先查文档，别硬啃 shadow
快照不是复制 HTML 字符串，而是协调 DOM 属性、框架状态、shadow 封装边界的一次精确采样——漏掉任意一层，还原就会“看起来一样，用起来不对”。
