template.content.clonenode(true)不能自动同步状态，因其仅复制节点结构和初始html属性，不保留表单控件的运行时状态（如input.value、checked等），需改用document.importnode(template.content, true)深拷贝可序列化dom状态。
HTML 模板（<template></template>）本身不驱动状态同步，它只提供结构快照；真正实现属性驱动的状态同步，必须靠 JavaScript 在生命周期中读取 dataset、响应 attributeChangedCallback，并用 hidden 或 class 输出视图变更。
为什么 template.content.cloneNode(true) 不能自动同步状态
cloneNode(true) 只复制节点树，不保留表单控件的当前值、选中态或焦点位置。克隆后的 <input value="old"> 会重置为初始 value 属性值，而非用户输入后的 input.value property 值。
常见错误现象：用 template.content.cloneNode(true) 动态插入登录表单，用户已填内容在克隆后全部丢失。
- 必须改用
document.importNode(template.content, true)—— 它能深拷贝可序列化的 DOM 状态（如checked、selected、value） - 克隆后需立刻用 JS 注入动态数据：
cloned.querySelector('.js-username').textContent = user.name，而不是覆盖整个 innerHTML - 若模板含
data-属性（如data-user-id="1024"），应在connectedCallback中读取并转为内部状态，别在constructor里访问this.dataset（此时 DOM 未挂载）
data-* 属性在模板实例化中只能做初始化参数
data- 是一次性字符串注入点，不是响应式通道。SSR 渲染的 <user-card data-user-id="1024"></user-card> 在客户端 JS 初始化时，this.dataset.userId 是字符串 "1024"，不是数字，也不随后续 JS 修改而更新。
常见错误现象：服务端传 data-count="5"，客户端直接 count + 1 得到 "51"；或修改 el.setAttribute('data-count', '6') 后，组件逻辑无反应。
- 仅在
connectedCallback中读取一次：this.userId = Number(this.dataset.userId)，存为私有 property - 结构化数据必须用
JSON.parse(el.getAttribute('data-config')) || {}，且包裹try/catch - 禁止在模板里写动态
data-值（如data-timestamp="{{now()}}"），SSR 与客户端初始值不一致会导致 diff 错乱
attributeChangedCallback 是唯一可控的 data- 变更响应入口
原生 <div> 或 <code><span></span> 上改 data-mode，JS 不会自动感知；只有自定义元素配合 static observedAttributes 和 attributeChangedCallback 才能捕获。
常见错误现象：document.querySelector('my-toggle').dataset.mode = 'dark' 不触发任何回调；或 SSR 后执行 el.setAttribute('data-mode', 'light')，组件无反应。
- 必须声明
static observedAttributes = ['mode', 'disabled']（不含data-前缀） -
attributeChangedCallback(attrName, oldValue, newValue)中，oldValue和newValue都是字符串，需手动转换：const isEnabled = newValue === 'true' - 状态同步必须操作 property：
this.#input.checked = this.checked，而非setAttribute('checked', '')—— 后者只影响初始值，不控制实时状态
hidden 和 class 是唯一能可靠驱动视图更新的输出通道
hidden 和 class 是少数几个浏览器原生支持「属性变更 → 视图重绘」的全局属性。它们不是数据容器，但能作为状态输出的最终落点。
常见错误现象：用 el.hasAttribute('hidden') 判断显隐状态，结果初始 HTML 带 hidden、JS 后续设 el.hidden = false，但 attribute 没删，读出来还是 true；或用 title 控制提示文案，结果不触发重绘。
- 状态机迁移后，统一用
el.hidden = true/false控制显隐，别碰setAttribute('hidden', '') - 多状态 UI（如 loading / error / success）用
el.classList.toggle('loading')，配合 CSS 的.state-loading .spinner命名空间规则 - 避免用
id或tabindex承载业务状态——它们语义受限，且不保证触发重绘
真正难的不是读取 dataset，而是区分哪些该在 connectedCallback 初始化，哪些必须等 attributeChangedCallback 响应；以及始终记住：hidden 和 class 是你唯一能放心交给浏览器去“看见”的出口。
