沙箱中template标签需克隆后使用：其content为只读documentfragment，必须clonenode(true)才能复用；slot仅在shadow dom生效；服务端模板需用template.html绕过转义；禁用innerhtml拼接模板；ie降级用注释包裹+domparser解析。
沙箱环境里 template 标签不渲染，得手动克隆插入
浏览器原生 <template></template> 标签内容默认不解析、不执行、不渲染——哪怕里面写了 <script></script> 或 <img src="xss">。沙箱环境（如 iframe、Shadow DOM 或 CSP 严格策略下）更不会自动激活它。直接写 document.body.appendChild(tmpl.content) 第二次就会失败，因为 tmpl.content 是只读的 DocumentFragment，移走就空了。
必须显式调用 cloneNode(true) 才能复用：
const tmpl = document.querySelector('template#card');
const instance = tmpl.content.cloneNode(true); // 关键一步
instance.querySelector('.title').textContent = '动态标题';
document.getElementById('container').appendChild(instance);
- 不 clone 就 append，第二次操作会静默失败（
instance变成空文档片段） -
tmpl.content上不能直接addEventListener，得先克隆成普通节点树 - 模板内
<slot></slot>在普通 DOM 中无效，仅对 Shadow DOM 生效；沙箱若非 ShadowRoot，则忽略<slot></slot>
服务端模板（如 Go 的 html/template）在沙箱中需禁用 auto-escape 并显式注入
GoFrame 或 3x-ui 这类服务端模板引擎生成的 HTML，默认开启 AutoEncode:true，所有变量输出都 HTML 转义。但沙箱环境（如 iframe.contentDocument 或微前端子应用）往往需要原始 DOM 结构或内联脚本绑定，此时转义会破坏结构或事件逻辑。
解决办法不是关全局转义，而是用 template.HTML 类型绕过：
type CardData struct {
Title string
Script template.HTML // 显式标记为安全 HTML
}
data := CardData{
Title: "用户卡片",
Script: template.HTML(`<script>console.log("loaded in sandbox");</script>`),
}
- 直接用
{{.Script}}输出不会被转义，但必须确保内容可信（比如由后端构造，非用户输入） - 若沙箱启用 CSP，
unsafe-inline脚本会被拦截，此时应改用外部 script + nonce 或预编译函数 - GoFrame 的
gview支持自定义函数注册，可封装安全的 DOM 注入逻辑，避免模板里裸写template.HTML
组件化渲染时，避免 innerHTML + template 混用导致样式/脚本丢失
有人想“先用 innerHTML 填数据，再塞进 <template></template>”，比如：tmpl.innerHTML = '<div>{{name}}</div>'.replace(...)。这完全绕过了 <template></template> 的设计初衷，且会导致以下问题：
- 原本模板里的
<style scoped></style>、<script type="module"></script>全部被覆盖丢弃 - 自定义元素（如
<my-button></my-button>）不会升级，变成纯静态标签 - data-* 属性绑定、CSS 自定义属性继承链断裂
正确做法是保留模板原始结构，用 JS 遍历填充：
const instance = tmpl.content.cloneNode(true);
instance.querySelectorAll('[data-bind]').forEach(el => {
const key = el.dataset.bind;
el.textContent = data[key] || '';
});
如果逻辑复杂，建议把模板内容抽成纯函数，返回 DocumentFragment，而不是拼字符串。
IE 或旧版沙箱不支持 template，降级方案要轻量且无副作用
IE11 及更早版本完全忽略 <template></template> 标签，其子节点会被当作普通 DOM 渲染出来（表现为页面顶部突然出现一堆隐藏结构）。这不是 bug，是规范未实现。
低成本降级方式是：用注释包裹模板内容，运行时提取并创建 DocumentFragment：
<!-- template#card --> <div class="card"><h3 class="title"></h3></div> <!-- /template -->
然后用正则或 DOM 查询提取注释节点内容，DOMParser 解析为 fragment。注意别用 innerHTML 直接解析，否则 script 不执行；要用 createContextualFragment 或完整文档解析。
真正容易被忽略的是：沙箱环境（尤其是 iframe）的 document 对象可能没有 template 支持，也未必有 DOMParser，得提前 feature detect 并 fallback 到字符串模板 + createElement 组装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
