直接复用html模板会导致数据丢失，因为原生无状态记忆能力，clonenode(true)会重置input.value等运行时状态；需通过localstorage与宿主属性联动实现双向及时同步，并用documentfragment局部更新避免全量重绘。
为什么直接复用HTML模板会导致数据丢失
因为原生<template></template>只是声明式占位符，不带任何状态记忆能力。每次调用cloneNode(true)都会生成全新节点，input.value、textarea.selectionStart、滚动位置这些运行时状态全被重置。常见现象是：用户在复用的表单组件里输入一半，页面跳转回来后内容清空。
localStorage + 宿主属性联动才是可行路径
Shadow DOM或模板组件本身不保存状态，必须由宿主元素（即使用该组件的父容器）主动管理并同步到localStorage。关键不是“存进组件”，而是“把组件依赖的状态映射到外部可持久化的键值对”。
- 给宿主元素加自定义属性，如
<account-form data-email="user@example.com"></account-form> - 在
attributeChangedCallback中监听这些属性变更，只更新对应字段，避免全量重写shadowRoot.innerHTML - 每次用户输入后，立刻将值写入
localStorage.setItem('account-email', value)，同时同步到宿主this.setAttribute('data-email', value) - 页面加载时，先读
localStorage.getItem('account-email')，再设宿主属性，触发回调更新UI
用DocumentFragment替代innerHTML重绘
频繁设置shadowRoot.innerHTML会销毁整个子树，连事件监听器都得重绑。真实场景中，比如记账模板里动态增删收支条目，应该用DocumentFragment局部更新而不是全量替换。
- 预先缓存所有条目的DOM结构，用
document.createDocumentFragment()批量插入 - 删除某条目时，只调用
itemElement.remove()，不碰其他节点 - 保留
input引用，在更新前后手动保存/恢复.value和.selectionStart - 若用
lit-html等库，直接依赖其diff机制；纯JS则需自己比对key，只替换变动部分
跨页面时URL参数不能替代localStorage
URL参数适合传递少量、非敏感、临时性数据（如?step=2&ref=abc），但无法承载表单全部字段——长度限制、刷新即丢、无类型支持。真正需要“刷新不丢”的数据，必须落盘。
- URL参数只用于导航上下文，比如从首页跳转到编辑页时带
id，不带title和content -
localStorage负责持久化主体数据，如expenses数组、draft-content字符串 - 页面初始化时优先读
localStorage，失败再 fallback 到URL参数或默认值 - 注意
localStorage在隐私模式下会抛错，务必用try/catch包裹写入逻辑
connectedCallback触发时，拿到的仍是旧值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
