customelements.define()是唯一符合“热插拔”定义的原生api，支持动态注册/卸载、自动清理及生命周期钩子；需短横线命名、禁止提前使用；搭配dynamic import()加载插件模块并调用其install()函数，禁用script标签和fetch+innerhtml。
HTML 没有“硬件可扩展插槽”这个概念，所谓“模块化热插拔”在前端语境里完全不依赖物理插槽，而是靠运行时加载机制与 DOM 生命周期控制。直接按硬件思维去选“HTML 插件函数工具”，会掉进术语混淆的坑里。
customElements.define() 是唯一符合“热插拔”定义的原生函数
浏览器原生支持的、真正能动态注册/卸载且自带清理钩子的机制，只有 customElements.define()。它不是“工具函数”，而是标准 API；调用后，标签可随时插入 DOM，移除时自动触发 disconnectedCallback 清理事件监听器和定时器。
- 必须带短横线命名，如
nav-bar，写成navbar会被浏览器静默忽略 - 注册前不能提前使用该标签，否则解析为未知元素，后续 upgrade 不触发生命周期
- 若需 SSR 兼容或第三方脚本未就绪，改用
<button is="smart-button"></button>+{ extends: 'button' }注册方式
动态 import() 是加载插件逻辑的正确姿势，不是 script 标签
用 <script src="plugin.js"></script> 加载插件，会导致全局污染、顺序不可控、无法按需触发。真正的热插拔必须靠 import() 动态加载模块，再显式调用其导出的注册函数。
- 插件文件应导出
install()函数，内部调用customElements.define() - 主应用中：
await import('./plugins/chart-widget.js').then(m => m.install()) - 别用
document.scripts判断是否加载完成——它对import()完全不可见
热插拔 ≠ 纯 HTML 片段加载，fetch + innerHTML 是典型反模式
直接 fetch('sidebar.html').then(r => r.text()).then(html => el.innerHTML = html) 看似简单，但在后台系统中必然引发三类问题：白屏、权限绕过、<script></script> 不执行。这不是“热插拔”，是裸奔式拼接。
-
<script></script>标签被当文本插入，不会执行；想执行就得手动创建script元素并 append - 无权限校验环节，加载了不该看的模块，DOM 插入后再 remove 会造成闪动
- 多个模块若含同名函数（如
initMenu()），后者直接覆盖前者，JS 冲突不可避免
真正可控的热插拔，必须把结构合并放在构建阶段（如 posthtml-include 或 Vite 的 ?raw 导入），再用轻量 JS 控制显隐与数据注入——结构静态、行为动态、权限前置。别指望一个函数或工具包能绕过这个分层逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
