shadow dom本身不提供状态持久化能力，所有状态（如表单值、滚动位置、焦点）必须由开发者在组件外部显式管理；每次设置shadowroot.innerhtml会销毁旧子树并重置全部状态，应改用documentfragment或差异渲染方案，并将关键状态同步至宿主属性与localstorage。
Shadow DOM 本身不提供状态持久化能力，HTML结构、属性、事件监听器这些都随 shadowRoot 被销毁而消失；所谓“状态持久化”，必须由开发者在组件外部显式管理，不能依赖 Shadow DOM 自身机制。
为什么 shadowRoot.innerHTML = ... 会丢失所有状态
每次对 shadowRoot.innerHTML 赋值，浏览器都会：销毁旧子树 → 清除所有事件监听器 → 丢弃已绑定的 DOM 引用 → 重新解析 HTML 字符串 → 创建全新节点。这意味着：input.value、textarea.selectionStart、customElement.state 等全部归零。
- 常见错误：在
attributeChangedCallback里直接重写shadowRoot.innerHTML，导致用户正在输入的内容瞬间清空 - 真实场景：表单组件中，用户填了一半，父组件改了个无关的
theme属性，整个 shadow tree 重绘，输入框变空 - 替代方案：用
DocumentFragment批量更新局部节点，或使用lit-html的render()做差异比对
哪些状态需要手动持久化
Shadow DOM 内部没有“自动记忆”能力，以下三类状态必须由组件自身或宿主控制：
-
form类元素的值（input.value、select.selectedIndex、checkbox.checked）——需在更新前读取，更新后恢复 - 滚动位置（
element.scrollTop、element.scrollLeft）——尤其在列表/日历组件中容易被忽略 - 焦点状态（
document.activeElement是否在 shadow 内，以及具体哪个元素聚焦）——focus()不保证成功，需结合delegatesFocus: true和tabindex
localStorage + 自定义属性联动的实操要点
若组件需跨页面保留状态（如暗色模式开关、折叠面板展开项），应将关键状态映射到宿主元素的属性，并同步到 localStorage，而非藏在 shadow 内部：
- 把状态存在宿主上：
this.setAttribute('data-expanded', 'true')，再由宿主自己存到localStorage.setItem('my-accordion-expanded', 'true') - 避免在
connectedCallback里直接读localStorage后设置shadowRoot.innerHTML—— 此时 DOM 尚未就绪，应等requestAnimationFrame或setTimeout(() => {}, 0)延迟执行 - 监听宿主属性变更（
observedAttributes）时，只更新受影响的局部节点，例如：if (name === 'data-expanded') this.togglePanel(expanded)，而不是全量重绘
closed 模式会让持久化更难调试
选 mode: 'closed' 后，this.shadowRoot 返回 null，你无法通过 DevTools 查看当前渲染结构，也无法用 querySelector 检查内部节点状态。一旦持久化逻辑出错（比如 localStorage 值没正确反写进 input），几乎无法定位是哪一步断了。
绝大多数项目该用 mode: 'open' —— 它不降低安全性，但让状态流可观察、可打断、可修复。真正要防的不是“能访问 shadowRoot”，而是“不该暴露的 API 是否暴露了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
