不能靠 Symbol 解决 getElementById 冲突，因为 Symbol 是原始值，id 属性强制转为字符串（如 "Symbol(foo)"），失去唯一性且易违反 HTML ID 规范；真正防冲突需生成全局唯一、合法、可预测的字符串 ID，并配合 ref、querySelector、ID 校验及 Shadow DOM 等多重防护。
不能靠 Symbol 解决 getElementById 冲突，因为 Symbol 和 DOM ID 无关——getElementById 只认字符串，且只接受合法 HTML ID 字符串（不能含空格、不能以数字开头等），而 Symbol 是原始值，根本不能当 ID 用。
为什么 Symbol 不能用于 ID 属性
DOM 元素的 id 属性必须是字符串。尝试写 el.id = Symbol('foo') 会触发隐式转换，变成 "Symbol(foo)" 这样的字符串，不仅失去唯一性保障（多个 Symbol('foo') 转成字符串后都一样），还可能违反 ID 命名规范（如含括号、大小写敏感问题），导致 getElementById 行为不可靠。
更关键的是：Symbol 的“唯一性”在 DOM 层面毫无意义——浏览器不识别 Symbol，只解析字符串 ID；两个不同 Symbol 转成相同字符串后，ID 就重复了。
真正防冲突的 ID 命名策略
要确保 getElementById 绝不冲突，核心是生成**全局唯一、稳定、合法、可预测**的字符串 ID：
-
加前缀 + 时间戳 + 随机数：例如
mylib-modal-1747765680123-8a3f，前缀隔离业务域，时间戳保证顺序性，随机段防并发重复 -
模块级计数器 + 哈希缩略：每个组件类维护一个静态计数器，拼接组件名哈希（如
xxHash32('Dialog')）再 Base32 编码，得dlg-9m2xk7类似格式 -
避免纯随机 ID：如
Math.random().toString(36).substr(2, 8)有极小概率重复，且调试时难以追踪来源；必须带上下文标识（组件名/实例路径） -
ID 必须符合 HTML 规范：以字母或下划线开头，只含字母、数字、下划线、短横线；禁止空格、点号、冒号等——否则
getElementById可能静默失败或返回null
配合 JS 逻辑做双重防护
光靠 ID 唯一还不够，需从使用侧堵漏：
- 所有自研组件内部调用
getElementById前，先检查是否已存在同名 ID：if (document.getElementById(id)) console.warn(`ID conflict: ${id}`) - 优先用
ref或querySelector（配合 data-* 属性）替代getElementById，把定位逻辑收束到组件内部，不依赖全局 ID 空间 - 组件销毁时主动清除自己设置的 ID：
el.removeAttribute('id')，尤其在复用场景下防止旧 ID 残留 - 对第三方集成场景（如插件注入），用
Shadow DOM封装组件，完全隔离 ID 作用域——此时getElementById只在 shadow root 内生效，彻底无冲突
别踩的坑
这些做法看似省事，实则埋雷：
- 用
Symbol.description当 ID：描述只是提示，不是唯一标识，且多个 Symbol 可能描述相同 - 直接用
Math.random()生成 ID 后不校验：万一分母不够大，在长列表或高频创建场景下极易重复 - 把 ID 拼进模板字符串却没转义特殊字符：如组件名含空格或引号，导致 HTML 解析错误
- 假设“只要 ID 不重复，就一定安全”：忽略了 iframe、Web Component、第三方脚本动态插入元素等跨上下文干扰
