如何管理HTML组件间的依赖注入与通信-html教程-PHP中文网

customelements.define不声明依赖，需通过data-prereq标记+window.$deps集中管理状态，配合statechange事件驱动下游更新，避免硬编码查询和id冲突。

如何管理html组件间的依赖注入与通信

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 只是标记，不自动触发逻辑；必须有配套的协调器监听并驱动状态流转。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

Vue 的 provide/inject 和 Web Components 能混用吗

不能直接混用。Vue 的 provide/inject 是 Vue 组件树内部的响应式机制，只对 setup() 或选项式组件生效；Web Components 是原生标准，运行在独立的自定义元素上下文中，两者隔离。

如果一个 Vue 应用里嵌了 <auth-provider></auth-provider> 这样的自定义元素，又想让子组件 Vue 组件拿到它的登录态，得桥接两层：

让 auth-provider 在状态变更时 dispatch auth: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"]')（用
```
~=` 表示空格分隔匹配）
```
调试时一眼能看出组件身份，console.dir(el.dataset) 比查 <code>id 更可靠

真正容易被忽略的是：依赖关系一旦声明，就必须有对应的生命周期清理。没卸载时清除 window.$deps 条目或事件监听，内存泄漏比想象中更早发生。