HTML模板不支持按需加载组件，本质是控制JS、CSS、HTML片段的加载时机和执行上下文；直接注入HTML不会自动执行script、隔离style或触发customElements.define()，需手动补全。
HTML 模板本身不支持“按需加载组件”，所谓按需，本质是控制 JS、CSS、HTML 片段的加载时机和执行上下文；直接往 innerHTML 里塞字符串或用 v-html 注入，<script> 不会执行，<style> 不隔离，customElements.define() 不触发——这些都得你手动补全。
用 fetch + v-html 或 innerHTML 注入静态 HTML 片段
适合纯展示型内容（如协议弹窗、帮助页、后台配置块），服务端返回一段干净的 HTML 字符串，前端插入即可。
-
<script>标签不会自动执行，哪怕写在里面；若需运行逻辑，必须用DOMParser解析后遍历script标签，再动态创建并插入（⚠️仅限可信源，否则 XSS） -
<img src="...">会加载，但data-src、background-image等不会自动解析，需额外遍历处理 - 样式无隔离：注入的
<style>会全局生效，建议服务端把样式抽成独立<link rel="stylesheet">，或客户端用CSSStyleSheet实例注入到shadowRoot - 示例：
fetch('/api/privacy.html').then(r => r.text()).then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); // 提取 script 并执行（谨慎！） doc.querySelectorAll('script').forEach(s => { const script = document.createElement('script'); script.textContent = s.textContent; document.head.appendChild(script); }); container.innerHTML = doc.body.innerHTML; });
用 import() 动态加载封装好的组件（Vue/React）
这不是加载裸 HTML，而是加载一个包含模板、逻辑、样式的模块化组件；构建工具会把它拆成独立 chunk，真正实现代码分割。
- 路径必须是字符串字面量：
import('./components/Modal.vue')✅，import('./' + name + '.vue')❌（构建时无法分析依赖） - Vue 中用
defineAsyncComponent，React 中用React.lazy+Suspense；二者都要求包裹 fallback UI，否则白屏 - 失败必须
try/catch或.catch()，否则 Promise reject 会导致未捕获异常，控制台静默报错 - 注意 SSR 场景：
defineAsyncComponent需设ssr: false，否则水合 mismatch；React.lazy在 SSR 下不可用，得换loadable-components
用 <script type="text/x-template"> 缓存模板并延迟解析
零构建依赖、兼容老项目，适合微前端子页面或轻量级弹窗模板。
立即学习“前端免费学习笔记（深入）”；
- 浏览器忽略该标签内容，不解析、不请求其中资源（如
<img src>、background-image），直到你主动取出来用 - 写法：
<script type="text/x-template" id="modal-template"><div class="modal">...</div></script> - 触发时：
container.innerHTML = document.getElementById('modal-template').innerHTML，但同样不执行脚本、不加载内联资源 - 若需脚本能力，建议改用
customElements.define()+ 延迟注册，而非靠模板注入
用 customElements.define() 控制自定义元素定义时机
自定义元素不是“写了标签就自动加载”，它分两步：定义构造函数（define()）、实例化（插入 DOM 后升级）。这两步都可以延迟。
- 非首屏组件（如设置页、图表面板），推迟到用户交互前再
define()：button.addEventListener('click', () => customElements.define('my-chart', MyChart)) - 不能重复
define()同一名字，否则抛DOMException: "Failed to execute 'define'" - 定义后组件仍不渲染？检查是否已插入 connected DOM；
display: none不影响升级，但hidden属性或未 append 到 document 会卡住connectedCallback - 真正按需要结合
import()：button.addEventListener('click', async () => { const { default: MyCard } = await import('./my-card.js'); customElements.define('my-card', MyCard); });
最容易被忽略的是：所有“注入 HTML”的方式，都不等于“加载组件”——脚本不执行、样式不隔离、事件不绑定、升级不触发，这些都要你亲手补全；而真正的按需，核心不在 HTML 怎么写，而在 JS 什么时候调用 import()、define() 和 DOM 操作。
