IE8–IE11下<template>标签内容意外显示，需用display:none强制隐藏template及其所有子节点，并避免模板内含可执行/可加载内容。
IE8–IE11 下 <template> 标签内容意外显示怎么办
直接显露是因为旧 IE 完全忽略 <template> 标签，把它当普通容器解析，子节点照常渲染——不是样式没生效，是浏览器压根没把它当“惰性模板”处理。
用 display: none 强制隐藏 <template> 及其子节点
这是最简单、兼容性最好的降级手段。不能只给 <template> 本身设 display: none，因为 IE 会把它的子元素（比如 <div>、<p>）当作独立节点渲染到页面顶部或 DOM 中任意位置。
- 必须同时隐藏
<template>和它内部所有可渲染子节点：template { display: none; } template * { display: none !important; } -
!important是必要的：防止模板内联样式或后续 CSS 覆盖降级规则 - 避免用
visibility: hidden—— 它保留布局空间，可能撑开空白区域，且对屏幕阅读器仍暴露内容
为什么不用 hidden 属性降级
hidden 属性在 IE9+ 才支持，IE8 完全不识别该属性，也不会触发默认的 [hidden] { display: none; } 规则。手动加 hidden 对 IE8 无效，还可能干扰 JS 的逻辑判断（比如 el.hasAttribute('hidden') 返回 false 却实际被 CSS 隐藏了）。
- 不要写：
<template hidden><div>...</div></template>—— IE8 下照样显示 - 也不要依赖 JS 动态加
hidden：IE8 不支持该属性，setAttribute('hidden', '')不会生效 - 真正可靠的，只有 CSS 级强制隐藏
额外要防的坑：模板内容被提前解析执行
IE 下不仅显示内容，还会执行里面的 <script>、加载 <img src>、触发 <iframe>，造成资源浪费甚至报错。
立即学习“前端免费学习笔记（深入）”；
- 降级 CSS 只解决“显示”问题，不阻止解析执行 —— 所以模板里尽量避免放可执行/可加载内容
- 如果必须放脚本，改用字符串形式存在
data-*属性中，JS 克隆后才动态创建script元素 - 图片路径建议留空或用占位符，等克隆插入 DOM 后再赋值
src
真正的降级难点不在样式，而在于旧浏览器把 <template> 当成普通标签后，它的内容已脱离“惰性”语义，变成真实 DOM 节点——此时任何 JS 操作都得绕过原始结构，从头重建逻辑。
