HTML模板技术在组件属性配置热更新中的应用

HTML模板本身并不支持属性配置的热更新——它本质上只是一段静态字符串或DOM片段，不具备运行时的状态绑定能力。要实现“热更新”，必须借助外部机制：要么使用框架的响应式系统（例如Vue的HMR），要么手动接管状态迁移逻辑。

html-webpack-plugin 为何无法热更新组件属性

该插件的职责相对简单：将构建产物注入到HTML模板中，生成新文件，并通知浏览器重新加载页面。它并不会检查你的 data-* 属性是 old 还是 new，也不会逐一比对属性差异以进行局部更新。它触发的要么是整页刷新，要么是iframe替换，而非属性级别的更新。

• 举例说明：在 template.html 中，如果你将 改为 title="新标题"，插件会直接生成全新的HTML，然后让浏览器重新加载整个页面。
• 即便开启了 devServer.hot: true，该配置也只对JS和CSS模块有效。对于HTML模板的变更，默认行为会回退到live reload，即整页刷新。
• 理论上，你可以通过 templateContent 选项动态生成HTML字符串，再配合自定义loader做AST解析和属性diff。但说实话，这已经完全超出了html-webpack-plugin的设计边界。

纯HTML模板中实现属性热更新，这三件事必须手动完成

没有框架兜底时，“热更新属性”的本质其实很简单：读取旧值 → 替换节点 → 写回关键属性。浏览器不会自动帮你继承 dataset、className 或 disabled 等属性，所有工作都需要手动处理。

• 替换节点之前，先用 querySelectorAll('[data-component]') 扫描所有目标元素，缓存它们的 el.dataset、el.className 以及通过 el.getAttribute('disabled') 获取的显式属性值。
• 使用 replaceChildren() 或 innerHTML 更新容器后，再用同样的选择器查找新节点，逐个通过 el.setAttribute('data-xxx', cachedValue) 将旧值写回。
• 特别注意布尔属性的处理：disabled 和 checked 这类属性不能通过 setAttribute('disabled', 'false') 来关闭，必须使用 el.disabled = false 这种方式操作。
• 尽量避免直接操作 outerHTML —— 它会直接销毁父节点，连 parentNode 引用都会丢失，状态迁移完全无从谈起。

真正困难的不是编写这些代码，而是判断哪些属性该保留、哪些该重置、哪些根本无法保留。例如 input 的 selectionStart，或者 contenteditable 中的光标位置。这些细节虽不显眼，但一旦遗漏，用户就会感觉“页面闪了一下”，或者“刚输入的字怎么消失了”。

template 标签 + cloneNode(true) 是安全起点，但不解决属性热更新