<template>标签内容不可见且不执行脚本、不加载资源，必须用document.importNode(tmpl.content, true)安全克隆以保留表单状态并兼容Shadow DOM；注入数据需通过data-bind定位节点，用textContent或innerHTML（谨慎防XSS）赋值；挂载后由ECharts等库单独初始化图表，确保DOM就位、数据就绪、实例唯一。
为什么不能直接渲染成可视化组件
<template>标签在 DOM 中完全不可见，浏览器跳过其内容解析：内联 <script> 不执行、<img> 不加载、data-* 属性不被自动绑定。常见错误是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果页面空着——不是代码没写对，是根本没触发任何渲染流程。
更隐蔽的问题是：直接 innerHTML = tmpl.innerHTML 会丢失表单控件状态（比如 <input checked> 的选中态），且克隆出的 <script> 和 <style> 不会自动运行或生效。
如何安全克隆并注入数据到中
核心是用 document.importNode() 替代 cloneNode()，它能保留表单状态、正确处理 <select> 选项、兼容 Shadow DOM。
- 获取模板：
const tmpl = document.getElementById('chart-card') - 深克隆内容：
const fragment = document.importNode(tmpl.content, true) - 查找绑定点：
fragment.querySelectorAll('[data-bind]')，按data-bind="title"匹配节点 - 填充数据：文本用
node.textContent = data.title；HTML 内容用node.innerHTML = data.html（注意 XSS 风险） - 挂载：
container.appendChild(fragment)，避免用innerHTML覆盖已有结构
怎样让支持“传参”和复用
纯 <template> 没有属性监听或生命周期，所谓“传参”就是调用 JS 工厂函数时传入对象，再手动映射到 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
- 模板里用语义化
data-bind属性（如data-bind="chart-title"），别用 class 名，否则后期难维护 - 工厂函数返回
DocumentFragment，不是字符串，避免重复 HTML 解析 - 若需响应式更新，缓存首次生成的节点，后续只改
textContent或dataset值，不重新克隆 - 禁止硬编码
id（如id="echarts-1"），多次使用会导致 ID 冲突，影响 CSS 查询或echarts.init()初始化
和ECharts等可视化库怎么配合
<template> 只负责结构占位与数据绑定，图表渲染必须由 ECharts 等库单独接管。典型流程是：先用 importNode 克隆模板，插入含 id="chart" 的容器，再调用 echarts.init(document.getElementById('chart'))。
- 模板中预留
<div id="chart" style="width:100%;height:400px"></div>，不要写死尺寸，用 CSS 控制 - ECharts 实例必须在 DOM 插入后创建，不能在
<template>内初始化——那里脚本根本不执行 - 图表 resize 需监听容器变化，建议用
ResizeObserver，而非依赖窗口 resize 事件 - 多个图表共用同一模板时，确保每个
echarts.init()对应唯一 DOM 节点，销毁旧实例再 init 新的，否则内存泄漏
真正麻烦的不是克隆模板，而是把静态结构、动态数据、第三方图表库三者的时间线对齐——DOM 就位、数据就绪、ECharts 初始化，三个条件缺一不可，漏掉任意一个都会白屏或报 Cannot initialize ECharts instance 错误。
