HTML无法自动处理组件依赖，必须由JavaScript显式建模：通过customElements.define封装、dispatch component:ready事件、data-prereq声明依赖、window.$deps集中管理状态、WeakMap缓存引用，并设置超时兜底与调试验证。
HTML 本身不处理组件依赖关系，所有深度依赖必须由 JavaScript 显式建模和同步——没有例外，也没有“纯 HTML 解法”。
用 customElements.define() 封装带依赖声明的组件
Web Components 是目前最贴近原生 HTML 的组件化路径，但自定义元素默认彼此隔离，无法自动感知其他组件状态。要支持深度依赖（比如 form-step-2 必须等 form-step-1 提交成功才激活），得在组件内部主动暴露状态、监听事件、响应变化。
- 每个组件需定义明确的“就绪信号”，例如 dispatch
component:ready自定义事件，或设置data-status="ready" - 下游组件在
connectedCallback中查询前置组件是否存在、是否满足条件，不满足时先requestIdleCallback延迟重试，避免 DOM 尚未挂载就查不到 - 禁止在
constructor里访问document或其他组件，此时 DOM 还未 attach - 示例：一个依赖登录态的仪表盘组件可这样检查
class DashboardWidget extends HTMLElement {
connectedCallback() {
const auth = document.querySelector('auth-provider');
if (auth?.dataset.status !== 'logged-in') {
this.setAttribute('data-waiting-for', 'auth-provider');
this.classList.add('pending');
return;
}
this.render();
}
}
用 data-prereq + 集中状态管理替代硬编码父子关系
当组件嵌套很深（如 A → B → C → D），或存在跨层级、非父子关系的依赖（如侧边栏菜单项依赖顶部用户头像组件的状态），靠事件冒泡或 props 透传极易断裂。更健壮的做法是把依赖关系“外置”为声明式标记，再由统一的协调器驱动。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 给需要受控的组件加
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 提供配置）是常见死锁场景。浏览器不会报错，只会卡在白屏或部分渲染状态。
- 在组件注册时用
customElements.get('my-comp')检查是否已定义，未定义则延迟到DOMContentLoaded后重试 - 对关键依赖设置超时兜底：
setTimeout(() => { this.fallbackRender(); }, 3000) - 用
WeakMap缓存组件实例间引用，避免强引用阻碍 GC，也防止重复绑定 - 如果依赖链超过 3 层（A→B→C→D），建议拆出中间协调组件（如
flow-controller），把“谁等谁”变成“都听它调度”
真正难的不是写通依赖逻辑，而是让依赖可调试、可追溯。上线前务必确保每个 data-prereq 都能在控制台用 document.querySelectorAll('[data-prereq]') 列出来，且每个被依赖的组件都稳定输出 data-status ——否则你永远不知道是哪一环静默失败了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
