<template>标签是纯离线DOM片段，不解析插值、不响应数据、不自动绑定事件，所有动态能力必须通过JS手动注入；其内容被浏览器挂起，仅可通过content.cloneNode(true)克隆后操作节点实现渲染与交互。
template 标签不是 Vue 或 React，它不解析插值、不响应数据、不自动绑定事件——所有“可视化组件”的动态能力，都得靠 JS 手动注入，否则就是一堆静态 HTML 字符串。
为什么直接写 {{title}} 在 template 里没反应
浏览器把 template 当作纯离线仓库，template.content 是只读的 DocumentFragment，里面任何类似 {{title}}、v-if、ng-model 的写法，全当普通文本处理。你看到的只是字面量，不会被替换，也不会触发逻辑。
常见错误是把框架模板语法直接塞进 <template>，结果 DOM 里啥也没出来，控制台也不报错，页面就空着——这不是 bug，是预期行为。
-
template不执行脚本，不加载图片，不触发 CSS 伪类 - 所有占位符必须由 JS 显式查找节点并赋值，比如
clone.querySelector('.title').textContent = config.title - 如果用了
innerHTML赋值（尤其含用户输入），必须做 XSS 过滤，优先用textContent或setAttribute
template.content.cloneNode(true) 后要重绑事件
克隆出来的节点是“干净”的：事件监听器、表单状态、焦点、自定义属性全丢失。你不能指望原 template 里写个 <button onclick="doSomething()"> 就能工作——内联 handler 在克隆后失效，且违背现代 JS 实践。
正确做法是在每次克隆后，用 addEventListener 显式绑定：
立即学习“前端免费学习笔记（深入）”；
const clone = template.content.cloneNode(true);
const btn = clone.querySelector('button.cta');
btn.addEventListener('click', () => handleAction(config.action));
container.appendChild(clone);
- 别依赖事件委托（尤其在 Shadow DOM 内），因为克隆节点脱离原始上下文
- 按钮禁用状态、输入框默认值、下拉选中项，都得手动设，例如
input.value = config.defaultValue - 若组件需多次渲染（如配置更新），每次都要清空容器、重新克隆、重新绑定，不能复用旧节点
如何让 template 组件真正“可配置”
可配置性不在 HTML 层，而在 JS 如何组织数据流和 DOM 操作。推荐封装成函数或自定义元素方法：
- 配置统一走 JS 对象传入，避免
data-属性硬编码（不易类型校验，难维护） - 模板内用语义化 class（如
.chart-title、.data-series），不用 ID（ID 克隆后重复，querySelector 会出错） - 图片
src做协议白名单校验，只允许https:、data:、/开头，防 XSS 和非法跳转 - 提供
render(config)方法，内部做清空 → 克隆 → 填值 → 绑定 → 插入四步，不暴露中间节点
注意：JSON 类型配置无法通过 DOM attribute 表达，所以自定义元素的 attributeChangedCallback 只适合简单字符串属性（如 theme="dark"），复杂配置必须存在实例属性上，再显式调用 render()。
搭配 ECharts 或 D3.js 时，template 只管容器，不管图表逻辑
template 可以定义图表容器结构（如 <div class="chart-container"></div>），但图表初始化、数据绑定、resize 监听、销毁清理，全得在 JS 中独立管理。
- 不要在
template里写<script>echarts.init(...)</script>—— script 不执行 - 克隆后拿到
.chart-container节点，再调用echarts.init(containerNode) - 图表实例需保存在组件作用域内（如
this.chart = echarts.init(...)），以便后续setOption或dispose - 窗口 resize 时，别忘了调用
this.chart.resize()，template不帮你做这个
最易忽略的一点：克隆后的节点插入 DOM 后，才具备尺寸信息；ECharts 初始化必须等节点挂载完成，否则 canvas 宽高为 0 —— 别在 clone 阶段就 init 图表。
