template.content克隆后内联script不会自动执行，因documentfragment无执行上下文；需手动遍历script节点，对内联脚本用function执行或提取逻辑为命名函数调用，对外链脚本需新建script标签并插入。
template.content克隆后，内联script不会自动执行
这是最常被踩的坑：把 <script>init();</script> 写进 <template></template>，以为克隆插入后就会运行——实际完全不会。浏览器在解析 <template></template> 时，会挂起所有脚本执行、样式应用和资源加载，哪怕你已经调用 cloneNode(true) 并 appendChild() 到文档，里面的 <script></script> 仍是“休眠”状态。
原因很简单：template.content 是一个 DocumentFragment，它不参与文档生命周期，没有 DOMContentLoaded，也没有脚本执行上下文。克隆出来的节点只是结构副本，不是活的执行环境。
- 直接操作
template.content（如querySelector）会失败，必须先克隆或导入 -
innerHTML = ...赋值到<template></template>后，其中的<script></script>仍被挂起，不会解析也不会执行 - 服务端返回的 HTML 字符串若含
<script src="x.js"></script>，克隆后该标签存在但不会触发下载
手动执行内联script的两种安全方式
如果你必须保留模板内的初始化逻辑（比如快速原型），得自己“唤醒”脚本。注意 CSP 策略可能禁止 eval，生产环境优先选第二种。
- 对每个内联
<script></script>节点，用Function(script.textContent)()执行（仅限开发调试，Function构造函数受 CSPunsafe-eval限制） - 遍历克隆后的 fragment：
frag.querySelectorAll('script')，对每个有src的创建新<script></script>并 append 到document.head；对内联的，提取文本后动态创建并插入（确保执行顺序） - 更推荐的做法：把逻辑抽成命名函数（如
window.initCard = function() {...}），克隆后显式调用initCard()，避免字符串 eval 和 CSP 风险
template里写script src=... 为什么没反应
因为 <template></template> 中的 <script src="foo.js"></script> 不会被浏览器识别为可加载资源——它只是 DOM 节点，不是活动文档的一部分。即使你克隆并插入，该节点已存在，但浏览器不会重新触发它的 src 加载逻辑。
- 克隆后需手动检查
script.src是否非空，然后创建新script标签并设置src，再 append - 重复插入同一
src可能导致多次加载，建议加缓存判断（如用document.querySelector(`script[src="${src}"]`)） - 如果脚本依赖 DOM 就绪（比如要查
document.body），确保在插入 fragment 后再执行，否则可能报错
为什么Vue组件里的template能正常渲染脚本而原生不能
这不是 <template></template> 的问题，而是 Vue 编译器根本没用原生 <template></template> 标签做运行时容器。Vue 单文件组件中的 <template></template> 是编译时语法糖，最终被转成 render 函数或 VNode，JS 逻辑走的是 Vue 的响应式更新流程，和 HTML <template></template> 的惰性 DOM 片段机制完全无关。
换句话说：你在 Vue 里写的 <script></script> 不是塞进 HTML <template></template>，而是作为组件定义的一部分，在组件实例化时由 Vue 主动执行。原生 <template></template> 没有“实例化”概念，只有你手动克隆 + 插入 + 手动触发这三步。
真正容易被忽略的是：克隆后不仅要处理 <script></script>，还要重置 ID、绑定事件、处理 <slot></slot> 分发——这些都不会自动发生，<template></template> 只负责给你一个干净、惰性的结构快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
