单文件组件在纯html场景下指一个.html文件内同时包含结构（）、样式（）和行为（），通过document.importnode克隆模板、动态注入带data-component前缀的样式、调用初始化函数绑定事件，实现无构建工具、无框架依赖的原生复用。
什么是“单文件组件”在纯 HTML 场景下的真实含义
它不是指 .vue 文件，也不是构建工具产物——而是指：一个 .html 文件内，同时包含结构（<template></template>）、样式（<style></style>）和行为（<script></script>），且能被其他页面直接加载、实例化、复用。这种模式不依赖 Vue 或 Webpack，只靠原生 DOM API 和模块系统就能跑起来。
用 <template></template> + document.importNode 加载组件内容
浏览器原生支持 <template></template> 标签，它的内容不会渲染，但可被 JS 安全克隆。关键点在于：不能直接 innerHTML 插入 script 标签（会失效），也不能用 eval 执行内联脚本。
- 把组件的 HTML 结构写在
<template id="my-button"></template>里，样式放<style></style>块中（加[data-component="my-button"]选择器避免全局污染） - 行为逻辑封装成独立函数，比如
initMyButton(node)，接收挂载后的 DOM 节点并绑定事件 - 加载时用
document.importNode(template.content, true)克隆，再调用初始化函数 - 不要用
innerHTML +=拼接字符串模板——会丢失事件监听器，也无法执行内联<script></script>
如何让 CSS 和 JS 真正“局部化”而不冲突
没有 scoped 属性，也没有 CSS-in-JS，只能靠约定和轻量封装。最可靠的方式是：为每个组件生成唯一前缀，并在 JS 中动态注入样式块。
- 给组件根元素加
data-component="my-button"属性，所有样式都以此为父选择器，例如[data-component="my-button"] .btn - JS 初始化时检查
document.querySelector('style[data-component="my-button"]')是否已存在，避免重复插入 - 不要把
<style></style>放在<template></template>内——它不会随 template.content 一起克隆出来，必须手动提取并注入 - 若组件含第三方库依赖（如
lodash），不要在内联<script></script>中 import，应由宿主页统一提供，组件只做功能检测
为什么 customElements.define 不是万能解法
Web Components 确实能实现真正的单文件封装，但有几个硬伤在轻量场景下很致命：
-
customElements.define必须全局唯一名称，<my-button></my-button>一旦注册，就不能被另一个同名组件覆盖或热替换 - Shadow DOM 隔离了样式，但也隔离了外部 CSS 主题控制能力——比如你没法用
.dark-mode <my-button></my-button>统一改色 - 生命周期钩子（如
connectedCallback）无法感知父组件是否已 mount 完毕，容易触发过早操作 - 调试困难：Chrome DevTools 里看不到自定义元素内部的真实 DOM 结构，除非手动打开 Shadow Root 开关
真正轻量的单文件组件，往往绕开 customElements，用函数工厂模式更可控：每次调用 renderMyButton(container, options) 返回一个干净节点，不注册全局标签，也不污染原型链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
