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 变更或异步加载中悄然断裂。
