HTML模板本身不匹配数据驱动渲染，需JS逻辑桥接；class名是JS操作契约接口，须与查询路径严格一致；字段映射须一一对应并校验；更新DOM应细粒度操作而非重置innerHTML；自定义元素属性监听需observedAttributes精确匹配。
HTML 模板本身不匹配任何“数据驱动渲染”，它只是静态字符串；所谓匹配，本质是人为设计 JS 逻辑去桥接模板结构与数据形态——匹配错位，轻则字段丢失，重则渲染崩溃或 XSS。
template 标签克隆时 class 名必须与 JS 查询路径严格一致
用 <template> 做行级模板时，JS 填值依赖 querySelector 定位节点。如果模板里写 <td class="user-name"></td>，而 JS 写 row.querySelector('.name')，就查不到。
- class 名不是“语义标签”，而是 JS 操作的契约接口，拼写、连字符、大小写全要对齐
- 避免用多层嵌套 class（如
.card .header .title），querySelector易受 DOM 变动干扰，优先用单级唯一 class - 若需支持多主题，用 data 属性替代 class 区分，比如
data-field="email"，再用row.querySelector('[data-field="email"]')
JSON 数据字段名与 template 中 DOM 节点必须一一映射
常见错误是后端返回 { user_name: "张三" }，但模板里只写了 <td class="name"></td>，JS 却硬写 cell.textContent = data.name——结果为空。
- 字段映射不能靠“猜”，应在初始化时做一次校验：遍历所有
data-*或 class 名，检查对应 key 是否存在于数据对象中 - 推荐在模板节点上显式声明绑定字段，例如
<td data-bind="name"></td>，JS 统一读node.dataset.bind取 key - 遇到嵌套字段（如
profile.email），不要在模板里写data-bind="profile.email"，而应预处理数据扁平化，或让 JS 支持点号路径解析（get(data, node.dataset.bind)）
render 函数里别直接改 innerHTML，否则事件监听器全丢
哪怕只更新一个数字，用 row.innerHTML = `<td>${item.count}</td>` 会销毁整个 <tr> 子树，已绑定的 click、input 事件全部失效。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是只更新文本内容：
row.querySelector('.count').textContent = item.count - 若需动态增删子节点（如状态 badge），用
DocumentFragment批量操作，最后一次性row.appendChild(fragment) - 首次渲染可用
innerHTML初始化整行，但后续更新必须走细粒度 DOM 操作——这是“数据驱动”的底线，不是可选项
自定义元素中 attributeChangedCallback 不触发？先查 observedAttributes 拼写
写 static get observedAttributes() { return ['data-count']; }，但属性实际是 count，回调永远不会进；或者漏写 count，改了属性也无响应。
-
observedAttributes返回的数组必须与 HTML 属性名完全一致（小写、无前缀），且只能是字符串数组 - 首次挂载时已存在的属性不会触发
attributeChangedCallback，必须在connectedCallback里手动调用一次this.render() - JS 属性（如
this.count = 5）默认不触发更新，得用Object.defineProperty或Proxy封装 setter，并同步调用render()
最常被忽略的不是语法，而是“模板”和“数据”的边界是否被清晰划出：一旦开始用 JS 动态填值，那个 HTML 字符串就不再是 HTML，而是协议约定的结构契约——改模板要同步改 JS 查询逻辑，改数据结构要同步改模板字段声明，两边不同步，渲染就不可信。
