HTML本身不能实现组件级全局单例管理，因其无实例生命周期、状态封装或唯一性约束；每次document.createElement都新建节点，自定义属性仅作标记，不触发去重；单例必须由JS主动控制初始化、缓存引用及更新路径。
HTML 本身不能实现组件级别的全局单例管理——它没有实例生命周期、状态封装或唯一性约束能力。document.createElement 每次调用都新建节点，id 属性不阻止重复插入，data-singleton 这类自定义属性也仅是标记，不会自动拦截或合并。
为什么不能靠 HTML 标签声明式实现单例
浏览器解析 HTML 是纯声明式过程：写十次 <my-modal></my-modal> 就创建十个元素；哪怕它们有相同 id 或 data-singleton="true"，也不会触发去重、复用或报错。所谓“单例”，必须由 JS 主动控制初始化逻辑、DOM 引用缓存和后续更新路径。
用 Custom Element + 静态私有实例字段模拟单例
Web Components 提供了可封装的入口，但需手动保证唯一性。关键不是标签名，而是类内部是否共享同一份状态。
-
static #instance = null存储唯一实例引用，避免每次new MyModal()都新建 DOM 节点 -
constructor()中不立即创建 shadow DOM，只做基础初始化；真正挂载延迟到connectedCallback且首次触发 - 对外暴露的
open(content)方法只更新已有节点内容，不重复appendChild - 若需跨组件复用（如多个按钮触发同一个弹窗），必须统一通过
MyModal.getInstance().open(...)调用，而非直接 new
示例片段：
立即学习“前端免费学习笔记（深入）”；
class MyModal extends HTMLElement {
static #instance = null;
static getInstance() {
if (!this.#instance) {
this.#instance = document.createElement('my-modal');
document.body.appendChild(this.#instance);
}
return this.#instance;
}
connectedCallback() {
if (this !== MyModal.#instance) return; // 忽略非单例实例的连接
this.render();
}
render() {
this.innerHTML = `<div class="modal">${this.getAttribute('content') || 'default'}</div>`;
}
}
Vue 全局组件里怎么避免多个实例？
Vue 的 Vue.component 注册的是模板工厂，不是运行时单例。每个 <my-modal></my-modal> 标签仍会生成独立组件实例——data 独立、watch 独立、生命周期独立。
- 真要全局唯一，得把状态提到 Vue 根实例或 Pinia store 里，组件只负责渲染和触发动作
- 或者在组件内用
provide/inject+ 顶层 provider 控制“实例数”，例如 inject 一个modalService，所有组件都调它的show()方法 - 别依赖
data函数返回对象来“假装单例”——那只是每个实例自己有一份副本，不是共享状态
最容易被忽略的坑：环境隔离与 SSR
客户端代码里写的 static #instance 在服务端渲染（SSR）时会失效：Node.js 没有 document，document.createElement 直接抛错；即使加了判断，服务端和客户端各自维护一份 #instance，导致 Hydration 失败或状态不一致。真正健壮的单例必须区分运行时环境，且初始化时机要对齐首屏渲染节奏——比如只在 mounted 或 onMounted 后才真正挂载 DOM 节点。
