html组件样式热更新必须通过cssom增量注入+模块级依赖追踪，直接innerhtml替换style标签会导致规则丢失、闪屏、调试链断裂及复用组件样式清空。
HTML 组件的样式热更新不能靠单纯改 style 属性或重写 <style></style> 标签实现，必须走 CSSOM 增量注入 + 模块级依赖追踪双路径，否则会丢规则、闪屏、调试链断裂。
为什么直接 innerHTML 替换
常见错误是监听 HTML 变更后，用 document.querySelector('style').innerHTML = newCss 覆盖样式。这会导致：
-
sheet.cssRules全部丢失，@media、@keyframes等规则无法恢复 - 浏览器强制重排（reflow），所有过渡动画中断，出现肉眼可见闪烁
- 开发者工具中“Styles”面板断开与源文件映射，无法点击跳转到原始 CSS 行号
- 若该
<style></style>被多个组件复用，其他组件样式意外被清空
必须通过 CSSOM 的 insertRule/deleteRule 操作
真正安全的热替换只有一条路：拿到已有 <style></style> 或 <link> 的 sheet 对象，用 insertRule 和 deleteRule 增量更新。
- 动态创建的
<style></style>必须先document.head.appendChild(styleEl)，否则styleEl.sheet为null - 插入位置很重要：
sheet.insertRule(rule, index)中index超出sheet.cssRules.length会抛IndexSizeError；追加用sheet.cssRules.length，覆盖优先级高的规则用0 - 跨 origin 的
<link rel="stylesheet">（如 CDN 字体 CSS）其sheet不可写，此时只能 fallback 到新建<style></style>并注入 - IE11 不支持对
@keyframes等@规则调用insertRule，需提前检测：if (sheet.insertRule.toString().includes('CSSStyleSheet'))降级为整块替换
如何在 HTML 组件变更时触发样式热更新
Webpack 默认不监听 HTML 文件，因为 HTML 不是模块依赖图的一部分。要让 HTML 修改触发样式更新，必须建立显式依赖链：
- 用
html-webpack-plugin：配置template: './src/component.html'，它会在每次 HTML 变更时触发完整重建，并重新注入生成的<style></style>标签 —— 但这是“冷更新”，非增量 - 更精确的做法是：在组件 JS 入口里
import './component.css'，再用raw-loader或html-loader加载对应 HTML 模板，使 HTML 成为 JS 模块依赖项 - 若组件含内联样式（如
<div style="color: red">），热更新时需同步 patch DOM 属性，不能只更新 CSSOM —— 否则内联样式会覆盖新规则<li>单页应用中频繁切换组件预览页时，务必手动清除旧 <code><style></style>元素引用：styleEl.remove()+styleEl = null，否则sheet对象驻留内存，引发泄漏 - 给每次注入的规则加唯一标识注释：
/* [hot-reload-id:abc123] */ .btn { color: blue; } - 遍历
sheet.cssRules，用rule.cssText.startsWith('/* [hot-reload-id:abc123]')筛出待删规则并记录索引 - 倒序执行
deleteRule(index)（从高到低），避免索引偏移 - 批量
insertRule新规则，保持原子性；不要逐条插入，否则中间状态可能被渲染引擎捕获造成闪烁
热替换时如何避免规则残留和索引错位
不要循环 deleteRule(0) 清空样式表 —— 删除第一条会使后续规则索引全部前移，导致漏删或越界。
最易被忽略的是：热更新不是“替换样式”，而是“维护样式表的语义一致性”。哪怕只改一个颜色值，也要确保 @media 嵌套层级、选择器特异性、关键帧命名空间全部原样保留，否则视觉行为会意外漂移。
