自定义元素需借助外部机制实现跨实例通信：①用 CustomEvent 实现松耦合事件广播，注意 bubbles/composed；②通过全局响应式状态对象统一管理；③利用 attribute + MutationObserver 同步配置；④封装可复用通信行为模块。
自定义元素（Custom Elements）本身不提供内置的跨实例通信机制，它强调的是封装与隔离。要实现多个自定义元素之间的协同与数据共享，需在封装好的组件外部，借助标准 Web API 或轻量级协调层来桥接——不是让组件“互相调用”，而是让它们“共同响应同一信号”。
用 CustomEvent 实现松耦合事件通信
这是最符合 Web Components 设计哲学的方式：不依赖框架，不打破封装，靠浏览器原生事件系统广播和监听。
- 一个组件触发自定义事件：
this.dispatchEvent(new CustomEvent('inventory-updated', { detail: { id: 'item-123', qty: 5 } })) - 其他同页面的自定义元素监听该事件：
window.addEventListener('inventory-updated', handleUpdate) - 事件名建议带命名空间（如
myapp:cart-change），避免冲突 - 注意：事件默认不冒泡出 Shadow DOM 边界，若需穿透，创建时设
bubbles: true, composed: true
通过全局状态容器统一管理（推荐轻量方案）
不引入大型状态库，而是用一个极简的、页面级的响应式对象作为“中央枢纽”。
- 定义一个单例状态对象，例如
window.__SharedState = reactive({ cart: [], theme: 'dark' })（可用Proxy或Observable实现） - 每个自定义元素在
connectedCallback中订阅状态变化（如用Object.observe替代方案，或手动 watch key） - 更新时只修改共享对象，所有监听者自动响应，无需组件间直接引用
- 优势：解耦清晰、调试直观、无框架锁定
利用属性（attributes）+ MutationObserver 协同
适用于配置类、低频同步场景，比如多个计数器共用一个最大值限制。
- 在父容器（如
<div data-max-qty="10">）上设置统一 attribute <li>各自定义元素在初始化时读取该 attribute，并用 <code>MutationObserver监听其变化 - 当父容器 attribute 改变，所有子组件同步响应，比如禁用超出上限的按钮
- 适合静态约束、非实时数据流，开销小、兼容性好
- 封装一个
useSharedInventory()Hook，内部处理 localStorage key 生成、事件转发、本地缓存同步 - 多个自定义元素各自调用该 Hook，传入唯一 ID（如
useSharedInventory('product-a')） - Hook 自动区分存储键、过滤事件作用域，避免交叉干扰
- 本质是把“共享逻辑”下沉到能力层，而非让组件彼此知晓
配合自定义指令或行为（behaviors）增强复用性
在支持 behaviors 的环境（如微信小程序）或通过 mixin 模式，把通信逻辑抽成可复用模块。
