document.querySelector总拿错节点是因为全局类名冲突，如多个微前端子应用共用.modal，浏览器只返回首个匹配节点；应改用带模块标识的data-component-id等唯一属性定位。
为什么document.querySelector总拿错节点
常见现象是写document.querySelector('.modal')返回了子应用A的弹窗，但你本想操作子应用B的。这不是选择器写错了，而是全局作用域下类名冲突了——两个微前端模块都用了.modal，浏览器只认“第一个匹配到的”。
调试时先别急着改JS逻辑，打开开发者工具 Elements 面板，用 Ctrl+F 搜 .modal，看结果里是否混着多个模块的 DOM；再右键每个匹配节点 → “Scroll into view”，确认它们确实来自不同上下文。
- 禁用所有非当前模块的 JS 脚本：在 Sources 面板里勾掉其他子应用的 bundle，再刷新，看问题是否消失
- 临时加唯一前缀验证：在控制台执行
document.querySelectorAll('.modal').forEach((el, i) => el.setAttribute('data-debug', `modal-${i}`))，再查data-debug值分布 - 避免用 class 当定位依据：改用
data-component-id="auth-modal-7f3a"这类带模块标识的属性，它不会被 CSS 影响，也便于过滤
innerHTML = template.innerHTML 之后表单值全丢了
这是复用中最隐蔽的坑：模板里明明有 ，克隆后却变成空值、未选中。根本原因是 innerHTML 是字符串操作，它不保留 DOM 节点的运行时状态（value、checked、selectionStart 等），只复制初始 HTML 属性。
正确做法必须走 document.importNode()，且要从 tmpl.content 克隆，不是 tmpl.innerHTML。
- 检查是否误用了
cloneNode(true)：它会复制节点但不保表单状态，尤其在 Shadow DOM 下失效 - 确认克隆源：必须是
tmpl.content，tmpl本身是HTMLTemplateElement，不能直接 append - 挂载后手动恢复焦点/滚动位置：
fragment插入后，input不会自动获得焦点，需显式调用el.focus()
多个组件共用同一id导致事件监听错乱
典型错误是在模板里写 ，然后在 JS 里用 document.getElementById('submit-btn').addEventListener()。一旦该模板被实例化多次，getElementById 永远只返回第一个，后续绑定全部失效或覆盖。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
这不是“没写对”，而是 HTML 规范强制要求 id 全局唯一——浏览器发现重复时，只保证第一个可被查到，其余静默忽略。
- 立刻搜索项目里所有
id="，替换为data-id="或动态生成：id="submit-btn-${crypto.randomUUID()}" - 事件委托替代直接绑定：在容器上监听
click，用e.target.matches('[data-action="submit"]')判断来源 - 若必须用
id（如label[for]），则同步重设for和id：label.for = input.id = `input-${Date.now()}`
Shadow DOM 里样式没生效，但控制台没报错
写了 this.attachShadow({ mode: 'closed' })，也把 插进 shadowRoot，可元素还是没样式。大概率是：CSS 选择器写成了全局写法，比如 .btn { color: red }，而 shadowRoot 内部根本没有 .btn 类——它只认自己内部的节点。
更麻烦的是，mode: 'closed' 后连 shadowRoot.querySelector 都不可用，调试窗口直接黑盒。
- 确保
attachShadow在constructor()中调用：延迟到connectedCallback就晚了，部分浏览器会拒绝挂载 - 样式必须内联在 shadowRoot 中：
const style = document.createElement('style'); style.textContent = '.host { color: blue }'; this.shadowRoot.appendChild(style) - 避免用
:host-context(...)依赖外部状态：它在 SSR 或服务端预渲染时不可靠，优先用:host([data-status="loading"])这类内部属性驱动
真正难调试的从来不是语法错误，而是那些“看起来正常却行为异常”的状态残留——比如已卸载组件还在 WeakMap 里占着内存，导致新实例读到旧数据；或者 data-prereq 标记没清空，让下游组件永远等一个不存在的上游。这些点不会抛错，只会让逻辑在某个边缘路径上悄悄拐弯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
