不能直接当组件用，因为它根本不会被浏览器解析——不渲染、不执行、不加载、不响应data-属性；常见错误是误将其当作Vue的或Web Component的使用，导致DOM中为空；innerHTML = tmpl.innerHTML会丢失表单状态（如的勾选态），cloneNode(true)克隆后的和也不会自动执行或生效，且原生HTML不认识{{title}}类插值，必须手动替换。
为什么
它根本不会被浏览器解析——不渲染、不执行<script></script>、不加载data-属性。常见错误是把它当 Vue 的 或 Web Component 的
更隐蔽的问题：innerHTML = tmpl.innerHTML 会丢掉表单状态（比如 的勾选态）；cloneNode(true) 复制后插入的 <script></script> 和 也不会自动执行或生效；模板里写 {{title}} 这类插值，原生 HTML 完全不认识，必须手动替换。
怎么用document.importNode()安全克隆并填充
核心是别用 cloneNode，改用 document.importNode(tmpl.content, true) —— 它能保留表单控件状态、正确处理 选项，也兼容 Shadow DOM。
- 获取模板：
const tmpl = document.getElementById('card-template') - 克隆内容：
const fragment = document.importNode(tmpl.content, true) - 查找绑定点：
fragment.querySelectorAll('[data-bind]')，按data-bind="title"匹配节点 - 填充数据：文本节点用
node.textContent = data.title，HTML 内容用node.innerHTML = data.content（注意 XSS） - 挂载：
container.appendChild(fragment)，别用innerHTML覆盖已有结构
import './xxx.html?raw' 在 Vite/Webpack 里怎么配
浏览器原生不支持 HTML 模块导入，import './header.html' 必报 TypeError: Failed to resolve module specifier。
真实可行路径只有两条：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Vite：用
import headerHtml from './header.html?raw'，返回字符串，需配合DOMParser或template.content解析 - Webpack：配
raw-loader或html-loader，但要注意html-loader默认会把
root配置或统一用绝对路径 - 运行时 fetch：
fetch('./header.html').then(r => r.text())后，仍要手动处理<script></script>标签（创建并插入），否则逻辑断掉
如何让
纯 HTML 文件堆在一起，改个导航就得全局搜 ，不是维护，是考古。关键不在“拆”，而在“拆完能被其他层真正认出来”。
必须做三件事：
- 组件根元素加
data-component="product-card"和data-version="1.2.0"，JS/CSS 查起来稳定，版本可追溯 - 禁用
id锚点——同一页面多次渲染同个卡片时，id="card-1"会重复，破坏 CSS 选择和 JS 查询 - 模板统一用
包裹，别藏在display:none的里——前者不参与样式计算、不触发重排，取内容也干净真正难的不是写模板，而是让每个
在构建流程里有明确归属、可被 lint 检查、能随版本发布自动归档——这需要构建脚本里加一层校验逻辑，比如扫描所有data-component值是否唯一、是否匹配命名规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
