html模板本身不支持属性热更新，需依赖框架响应式或手动状态迁移；html-webpack-plugin仅生成新html并整页刷新，无法局部更新属性。
HTML模板本身不支持属性配置的热更新——它只是静态字符串或 DOM 片段，没有运行时状态绑定能力。所谓“热更”，必须靠外部机制介入：要么用框架（如 Vue 的响应式 + HMR），要么手动接管状态迁移。
html-webpack-plugin 为什么不能热更组件属性
它只负责把构建产物注入 HTML 模板，生成新文件并通知浏览器重载；html-webpack-plugin 不监听模板内某个 data-* 属性或 class 的变化，也不会 diff 属性差异后局部 patch。它触发的是整页刷新或 iframe 替换，不是属性级更新。
- 你改了
template.html里一个<my-card title="旧标题"></my-card>→title="新标题"，插件会生成全新 HTML，浏览器 reload 整页 - 即使开了
devServer.hot: true，它也只对 JS/CSS 模块生效，对 HTML 模板变更默认 fallback 到 live reload - 除非你用
html-webpack-plugin的templateContent选项动态生成 HTML 字符串，并配合自定义 loader 做 AST 解析 + 属性 diff，但这已超出其设计边界
纯 HTML 模板中想热更属性，必须自己做三件事
没有框架兜底时，“热更属性”本质是：读旧值 → 替换节点 → 写回关键属性。浏览器不会自动继承 dataset、className、disabled 等，全得手动搬。
- 替换前用
querySelectorAll('[data-component]')扫出所有目标元素，缓存el.dataset、el.className、el.getAttribute('disabled')等显式设置的属性 - 用
replaceChildren()或innerHTML更新容器后，再用相同 selector 查新节点，逐个el.setAttribute('data-xxx', cachedValue) - 特别注意布尔属性：
disabled、checked不能用setAttribute('disabled', 'false')关闭，得用el.disabled = false - 避免直接操作
outerHTML—— 它会销毁父节点，连parentNode引用都断了，状态迁移无从谈起
template 标签 + cloneNode(true) 是安全起点，但不解决属性热更
<template></template> 只保证结构复用不污染全局，它不保存任何运行时属性状态。克隆出来的节点是“干净”的，所有 dataset、value、checked 都是初始值。
- 正确用法：
const frag = document.importNode(template.content, true); frag.querySelector('[data-id="user"]').dataset.config = 'new-value'; container.replaceChildren(frag); - 错误用法：把整个
template当作配置源，以为改了template.innerHTML就能热更实例属性 —— 实例节点和 template 内容毫无引用关系 - 若组件有多个实例，每个都要单独缓存 + 映射，靠
data-key或id对齐，不能靠 DOM 位置序号（插入顺序一变就错）
真正难的不是怎么写代码，而是判断哪些属性该保留、哪些该重置、哪些根本没法保留（比如 input 的 selectionStart 和 contenteditable 的光标）。这些细节不显眼，但一旦漏掉，用户就会觉得“页面闪了一下”或者“刚输的字没了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
