如何通过HTML实现组件的深度依赖注入管理

HTML 不支持深度依赖注入，必须通过 JavaScript 显式建模；Web Components 需主动暴露状态与监听事件，配合 data-prereq 和 window.$deps 实现声明式依赖管理，并通过协调器处理就绪信号、环检测与超时降级。

HTML 本身不支持深度依赖注入，所有依赖关系必须由 JavaScript 显式建模和同步——没有例外，也没有“纯 HTML 解法”。

customElements.define() 必须封装带依赖声明的组件

Web Components 是目前最贴近原生 HTML 的组件化路径，但自定义元素默认彼此隔离，无法自动感知其他组件状态。要支持深度依赖（比如 form-step-2 必须等 form-step-1 提交成功才激活），得在组件内部主动暴露状态、监听事件、响应变化。

• 每个组件需定义明确的“就绪信号”，例如 dispatch component:ready 自定义事件，或设置 data-status="ready"
• 禁止在 constructor() 里访问 document 或其他组件——此时 DOM 还未 attach
• 下游组件应在 connectedCallback() 中查询前置组件是否存在、是否满足条件；不满足时用 requestIdleCallback 延迟重试，避免 DOM 尚未挂载就查不到

data-prereq + window.$deps 实现声明式依赖管理

当组件嵌套很深（如 A → B → C → D），或存在跨层级、非父子关系的依赖（如侧边栏菜单项依赖顶部用户头像组件的状态），靠事件冒泡或 props 透传极易断裂。更健壮的做法是把依赖关系“外置”为声明式标记，再由统一的协调器驱动。

• 给需要受控的组件加 data-prereq="user-avatar,plan-selector"，多个 ID 用英文逗号分隔
• 用轻量级状态对象（如 window.$deps = new Map()）记录各组件当前状态，而非反复查询 DOM
• 每当任一组件触发 statechange 事件，协调器只更新所有 data-prereq 包含它的下游组件，避免全量扫描
• 不要用 id 作为唯一标识绑定逻辑——动态生成的组件可能 ID 冲突；改用 data-component-id 或 Symbol 键

避免循环依赖：检测 + 降级比强行解耦更实用

两个组件互相等待对方就绪（A 等 B 初始化，B 等 A 提供配置）是常见死锁场景。

立即学习“前端免费学习笔记（深入）”；

• 在协调器中加入简单环检测逻辑，比如记录当前解析链路，发现重复 ID 时立即触发降级行为（如设为 data-status="degraded"）
• 对关键路径设置超时兜底：比如 setTimeout(() => { el.setAttribute('data-waiting-for', 'timeout') }, 5000)
• 调试阶段启用日志输出：检查 window.$deps 中各组件状态是否被正确写入和更新
• 不要试图用 Promise.all 或 async/await “串起所有依赖”——这会掩盖真实挂载顺序，且无法处理动态插入的组件

真正难的不是写一堆 data-prereq，而是让每个组件都清楚自己“何时算就绪”、以及“谁在等我”。这个边界一旦模糊，整个依赖链就会在 DOM 变更或异步加载中悄然断裂。