<p>原生 HTML <template> 不支持数据绑定，仅作离线 DOM 容器；需手动克隆、替换占位符并重挂事件；自定义元素配合 observedAttributes 和 connectedCallback 可实现初始化配置，但 data-* 属性不提供响应式更新。</p>
原生 HTML 模板中无法自动绑定数据
HTML 的 <template> 元素本身不提供任何数据绑定能力。它只是个“离线 DOM 片段容器”，内容不会渲染、不执行脚本、不加载资源——更不会监听 JS 对象变化或自动替换 {{ .Title }} 这类占位符。
常见错误现象：把 Glance 或 Handlebars 风格的 {{ .Title }} 直接写进 <template>，然后期望 JS 修改某个对象后页面自动更新。结果什么都没变，控制台也没报错，因为浏览器根本不认识这种语法。
-
<template>内容必须由 JS 手动克隆、遍历、查找并替换占位符（比如用textContent.replace()或innerHTML.replace()） - 若模板含事件绑定（如
onclick="handleClick()"），克隆后需重新挂载监听器，否则点击无效 - 直接操作
template.content后插入 DOM，该 DocumentFragment 只能用一次；重复插入会“消失”，必须每次cloneNode(true)
用 customElements.define() 实现带默认数据的可复用组件
真正支持“默认数据 + 自动绑定”的路径，是封装为自定义元素，并在 connectedCallback() 中完成初始化。此时你可以约定组件接受 data-* 属性作为初始配置，再映射到内部状态。
使用场景：需要多次复用同一结构（如 <user-card>），且每次传入不同用户信息，但又不想引入 Vue/React。
立即学习“前端免费学习笔记（深入）”；
- 声明时只监听标准属性名，例如
static get observedAttributes() { return ['user-id', 'avatar']; }，不是data-user-id - 在
attributeChangedCallback(name, oldValue, newValue)中处理类型转换：parseInt(newValue, 10)或newValue === 'true' - 不要在
constructor()中读this.dataset并操作子节点——DOM 尚未就绪，this.innerHTML = ...会清空已定义的 shadow DOM 或 template 内容 - 推荐在
connectedCallback()中首次填充，默认值来自this.getAttribute('user-id')或 fallback 到内部预设
data-* 不是绑定机制，只是初始化字符串传递
很多人误以为给 <user-card data-user-id="123"> 写上属性，就能在组件里实时响应这个值的变化。实际上，data-user-id 只是一次性字符串参数，改了 HTML 属性不会触发任何回调，JS 变量也不会自动更新。
容易踩的坑：
-
this.dataset.userId拿到的是字符串"123"，不是数字123；"true"≠true，必须手动转 - 连字符命名自动转驼峰：
data-show-avatar→dataset.showAvatar，但data-UID不会变成dataset.uid - 混用
v-bind:data-id="id"和原生dataset.id读取，等于绕过框架响应式系统，后续数据流不可控 - 把所有配置塞进
data-*看似轻量，字段一多就难以维护，也缺乏类型校验和默认值声明能力
复杂组件建议放弃纯原生，用轻量框架接管绑定逻辑
当组件需要条件渲染、列表循环、事件代理、异步加载或嵌套状态时，手写 replace() + addEventListener() 组合很快失控。此时 data-* + customElements 仍可保留，但数据绑定部分应交由微型库（如 htm + preact）或框架处理。
关键判断点：
- 是否要支持
v-for类似的列表渲染？原生没有等价物，必须手写for循环 +cloneNode，易出错 - 是否需响应式更新某字段后，自动刷新多个区域？原生需手动通知每个依赖点，极易遗漏
- 是否已有团队熟悉 Vue？直接用
<script setup>+defineProps初始化，比折腾 dataset 转换更可靠 - 是否对包体积敏感？
petite-vue（约 6KB）比从零实现一套绑定逻辑更省心
最常被忽略的一点：所谓“默认数据”，往往不只是初始值，还隐含“变更后如何同步”“错误时如何 fallback”“加载中如何占位”——这些都不是 <template> 或 data-* 能覆盖的边界。
