html模板比字符串拼接更适合依赖注入，因为html是嵌套状态机结构，正则或replace()会错判注释、cdata、自闭合标签（如），导致注入偏移、属性截断或xss；只有parse5、beautifulsoup等浏览器级解析器才能准确识别和节点并安全插入。
为什么 HTML 模板比字符串拼接更适合依赖注入
因为 HTML 是嵌套状态机结构，正则或 replace() 会错判注释、CDATA、自闭合标签（比如 <img src="<script>">），导致注入位置偏移、属性截断，甚至引入 XSS。只有用 parse5、BeautifulSoup 这类浏览器级解析器，才能准确识别 和 节点并安全插入。
构建时注入 vs 运行时 fetch 加载 navbar
运行时用 fetch() 加载 navbar.html 看似简单，实际会触发三类问题：
- 首屏白屏：导航栏异步加载完成前，
已开始渲染 - CSP 拦截：
innerHTML = data在严格策略下直接报Refused to set unsafe HTML - SEO 失效：爬虫不执行 JS，抓取到的是无导航的裸页
构建时用 vite-plugin-html 或 html-webpack-plugin + html-webpack-template 内联片段，输出纯静态 HTML，无延迟、无 CSP 冲突、无 SEO 风险。
<template></template> 本身不能直接实现依赖注入
<template></template> 只提供“不渲染的 DOM 片段”，它不支持传参、条件判断或自动引用外部资源。单独写个 <template id="card"><div>{{title}}</div></template> 不会自动替换 {{title}} —— 你得配合 JavaScript 手动克隆、填充、插入，比如用 document.importNode(template.content, true)。
真正起作用的是组合用法：
- 用
<slot></slot>做内容占位，配合 Web Components 封装逻辑 - 用构建工具把模板编译成可复用的 JS 组件，而非靠运行时解析 HTML 字符串
- 避免把
<template></template>当成“藏 HTML 的 div”来用，否则和硬编码没区别
服务端预处理必须保留 DOCTYPE 和编码元信息
用浏览器里的 DOMParser 处理用户提交的 HTML 并不可靠：它不保留 ，可能把 UTF-8 编码转成 UTF-16，还无法剥离恶意脚本——用户提交的 <code><script>alert(1)</script> 会在解析前就执行。
服务端解析器（如 parse5）能先做节点清洗、转义危险内容，再注入可信资源，最后用 parse5.serialize() 输出合法 HTML，确保 DOCTYPE、charset、命名空间全部 intact。
复杂点在于 SRI（Subresource Integrity）：CDN 资源若启用了 integrity 校验，注入 <script src="..."></script> 时必须同步计算哈希并写入 integrity 属性，否则在启用 require-sri-for script style 的 CSP 下直接被拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
