html模板不支持按需绑定或自动渲染，所有行为需javascript主动控制；仅是惰性dom容器，无响应式能力，需手动克隆、填值、挂载；customelements.define()才是按需注册入口，本质是延迟定义构造函数；fetch+innerhtml有脚本不执行、样式不隔离等限制；真正复杂的是决策“何时按需”。
HTML模板本身不支持按需绑定或自动渲染，所有“按需”行为都靠 JavaScript 主动控制；<template></template> 是唯一原生可用的惰性容器，但必须手动克隆、填值、挂载，且无响应式能力。
为什么<template></template>不能直接用于数据绑定
<template></template> 只是 DOM 片段的“冷藏室”，浏览器解析时跳过渲染、不执行脚本、不加载资源（如 <img src> 或 background-image）。它不监听数据变化，也不提供类似 v-model 或 {{ value }} 的语法支持。写进去的 {{ name }} 会被当作文本原样保留，不会替换。
- 常见错误：把 Vue 模板片段直接塞进
<template id="user"></template>，然后期望它自动响应data.name—— 实际只会显示{{ name }}字符串 - 正确用法：仅作为结构占位，配合 JS 手动提取：
document.getElementById('user').content.cloneNode(true) - 若需绑定，必须逐个操作节点：
el.querySelector('.name').textContent = data.name，不能批量或声明式更新
customElements.define() 才是真正的按需注册入口
所谓“组件按需”，本质是延迟定义自定义元素构造函数，而非延迟加载 HTML 字符串。浏览器遇到未注册的 <my-card></my-card> 标签时，先以 HTMLUnknownElement 形式存在，直到你调用 customElements.define() 才升级为真实组件。
- 首屏组件：放在
<script defer></script>中同步定义，避免首次渲染出现“未知标签”闪动 - 非首屏组件：在用户交互后动态
import()并define()，例如点击按钮才加载并注册<settings-panel></settings-panel> - 重复
define()同一名字会抛出DOMException，需确保模块只被引入一次 -
import()路径必须是静态字符串，否则构建工具无法拆包，例如import('./panels/' + name + '.js')无效
fetch + innerHTML 注入 HTML 片段的边界在哪
这是最常被误用的“按需渲染”方式：用 fetch() 拿一段 HTML 字符串，再赋给某个元素的 innerHTML。它能快速展示静态内容，但有硬性限制。
-
<script></script>标签内的 JS 不会执行 —— 浏览器忽略，除非你手动遍历、创建 script 元素并 append 到 head（⚠️ XSS 风险高，仅限可信源） -
<img src="xxx">会触发加载，但data-src、srcset等需额外解析逻辑 - 样式不会自动隔离：注入的 CSS 会全局生效，可能覆盖现有规则
- 事件监听必须由你手动绑定，无法复用组件内部的
addEventListener逻辑
真正容易被忽略的点
不是“怎么让 HTML 自动按需”，而是“谁来决定何时该按需”。<template></template> 不是组件，fetch 不是渲染器，import() 也不是魔法开关——它们都只是工具，背后必须有人写逻辑判断：这个弹窗该不该现在加载？那个卡片是否已进入视口？数据变了要不要重 render？这些决策点，才是按需绑定与渲染真正复杂的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
