不能直接当组件用，因其内容被浏览器跳过解析、不渲染、不执行脚本、不加载资源；必须通过document.importNode(tmpl.content, true)克隆并手动填充数据后插入DOM。
为什么<template></template>不能直接当组件用
它被浏览器跳过解析，不渲染、不执行脚本、不加载图片，DOM 中完全不可见。常见错误是把它当 Vue 的 <template></template> 或 Web Component 的 <slot></slot> 用，结果页面空白。
更隐蔽的问题是：直接用 innerHTML = template.innerHTML 会丢失表单控件状态（比如 <input checked> 的选中态）；用 cloneNode(true) 克隆含 <script></script> 或 <style></style> 的内容，这些节点不会自动执行或生效；模板里写 {{title}} 这类插值，纯 HTML + JS 不识别，必须手动替换。
怎么安全克隆并填充 <template></template> 内容
核心不是 cloneNode，而是 document.importNode——它能保留表单状态、正确处理 <select></select> 选项、兼容 Shadow DOM。
- 获取模板：
const tmpl = document.getElementById('card-template') - 克隆内容：
const fragment = document.importNode(tmpl.content, true) - 查找绑定点：
fragment.querySelectorAll('[data-bind]')，按data-bind="title"定位节点 - 填充数据：文本节点用
node.textContent = data.title，HTML 内容用node.innerHTML = data.content（注意 XSS） - 挂载：
container.appendChild(fragment)，别用innerHTML覆盖已有结构
dataset 在工程化配置中能干什么、不能干什么
dataset 只是一次性字符串注入点，不是响应式状态容器，也不是配置分发通道。你在 <my-app data-api-host="https://api-prod.example.com"></my-app> 里写的值，只是初始化时塞进去的字符串。
立即学习“前端免费学习笔记（深入）”；
它不会自动根据环境切换、不会监听远程配置中心变更、不会把 "true" 自动转布尔、也不会触发子组件重渲染。真要用它启动逻辑，必须手动读取：this.dataset.apiHost，再配合环境判断、JSON 解析、fallback 处理——这些都不在 HTML 能力范围内。
只有自定义元素（customElements.define()）能在生命周期中可靠承接 data- 属性，且必须满足三个硬约束：
- 初始化映射只能放在
connectedCallback()，不能在constructor()里操作子节点 - 要监听变更，得显式声明
static get observedAttributes()，返回['api-host']（不是data-api-host） -
attributeChangedCallback(name, oldValue, newValue)中的newValue永远是字符串，需手动转换：parseInt(newValue, 10)、JSON.parse(newValue)（加try/catch）、newValue === 'true'
前端工程化里，<template></template> 和框架组件的本质区别在哪
React 的 <mybutton></mybutton>、Vue 的 <mybutton></mybutton> 是 JavaScript 对象 + DOM 操作策略 + 更新队列调度的组合；<template></template> 标签只是静态占位符，脱离 JS 实例化逻辑就只是字符串。
JSX 不是 HTML，是 React.createElement() 的语法糖；Vue 单文件组件中的 <template></template> 块会被编译成渲染函数，{{ msg }}、v-if 全部转为响应式依赖收集。纯 HTML 文件打开后，{{ msg }} 会原样显示，v-for 被当作文本属性，既不报错也不生效。
真正容易被忽略的是：所有“组件”行为都依赖框架运行时接管；HTML 标签只是它们选择的序列化外观，不是运行基础。没框架，就没更新、没绑定、没生命周期。
