customElements.define不声明依赖，需通过data-prereq标记+window.$deps集中管理状态，配合statechange事件驱动下游更新，避免硬编码查询和id冲突。
customElements.define 里怎么声明依赖关系
Web Components 没有内置依赖解析，customElements.define() 注册的组件默认彼此无感知。想让 form-step-2 等 form-step-1 提交完成再激活，就得手动建模依赖链。
关键不是“注册时写依赖”，而是在组件内部主动暴露状态、响应变化：
- 每个组件在就绪时 dispatch
component:ready自定义事件（不要用DOMContentLoaded，那是全局的） - 下游组件在
connectedCallback中查前置组件是否存在、dataset.status是否为"ready" - 查不到或状态不对时，用
requestIdleCallback延迟重试，避免 DOM 尚未挂载就报错 - 绝对不要在
constructor里调用document.querySelector()—— 此时元素还没插入 DOM
示例：一个仪表盘组件检查登录态
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 + window.$deps 是怎么协作的
当组件嵌套很深（A → B → C → D），或存在跨层级非父子依赖（如侧边栏菜单项依赖顶部用户头像），硬编码查询极易断裂。data-prereq 是一种声明式解耦方案，配合集中状态管理才真正生效。
立即学习“前端免费学习笔记（深入）”；
具体做法：
- 给受控组件加
data-prereq="user-avatar,plan-selector"，多个 ID 用英文逗号分隔 - 用
window.$deps = new Map()记录各组件当前状态（如$deps.set('user-avatar', { status: 'ready' })），而不是反复querySelector - 每当组件触发
statechange事件，协调器只更新所有data-prereq包含它的下游组件，不扫描全量 DOM - 别用
id作唯一键 —— 动态生成组件可能重复；改用data-component-id或Symbol键
注意：data-prereq 只是标记，不自动触发逻辑；必须有配套的协调器监听并驱动状态流转。
Vue 的 provide/inject 和 Web Components 能混用吗
不能直接混用。Vue 的 provide/inject 是 Vue 组件树内部的响应式机制，只对 setup() 或选项式组件生效；Web Components 是原生标准，运行在独立的自定义元素上下文中，两者隔离。
如果一个 Vue 应用里嵌了 <auth-provider> 这样的自定义元素，又想让子组件 Vue 组件拿到它的登录态，得桥接两层：
- 让
auth-provider在状态变更时 dispatchauth:change事件，并把数据附在detail上 - 在 Vue 子组件的
onMounted里监听该事件，用ref或reactive同步状态 - 反过来，Vue 组件想通知自定义元素，得用
document.querySelector('auth-provider').dispatchEvent(...) - 别试图在
provide里传HTMLElement实例 —— Vue 不会追踪其属性变化，也不响应
本质是事件桥接，不是依赖注入穿透。Vue 的 provide 对原生元素完全不可见。
为什么不用 id 作为依赖标识，而要用 data-component-id
id 属性在 HTML 中要求唯一，但实际开发中很容易被构建工具、服务端模板、动态渲染破坏：Vite 压缩插件可能删掉空 id，SSR 渲染可能重复生成相同 id，框架复用节点也可能导致冲突。
data-component-id 是显式语义化标记，不受浏览器规范约束，且可由组件自身控制生成逻辑：
- 组件初始化时生成唯一值：
this.dataset.componentId = Symbol('dashboard-widget') - 协调器用
document.querySelectorAll('[data-component-id]')扫描，比getElementById更安全 - 支持批量查找：
document.querySelectorAll('[data-prereq~="dashboard-widget"]')（用~=` 表示空格分隔匹配）</li> <li>调试时一眼能看出组件身份，<code>console.dir(el.dataset)
比查id更可靠
真正容易被忽略的是：依赖关系一旦声明，就必须有对应的生命周期清理。没卸载时清除 window.$deps 条目或事件监听，内存泄漏比想象中更早发生。
