web components 本身不内置状态管理，但可通过 attribute/property 接收状态、customevent 输出变更，与 redux 等库协同；需明确数据流向、桥接响应式信号、同步 dom 与内部状态。
Web Components 本身不内置状态管理机制，但能与 Redux、RxJS、Nano Stores 等库自然协作，关键在于明确数据流向、桥接响应式信号、正确同步 DOM 属性与内部状态。不是“让 Web Components 接管状态”，而是让它成为状态消费端和事件反馈端。
用属性（attribute）和属性（property）做状态通道
Web Components 天然通过 attribute（字符串）和 property（任意类型）接收外部数据。状态管理库输出的状态，需经由这两者注入组件： - attribute 适合传递简单配置（如 `theme="dark"`、`disabled` 布尔标记） - property 更可靠，支持对象、数组、函数等复杂值，且 Vue/React 会优先写入 property（若存在同名 property）例如，在 Redux 场景中：
// 订阅 store，更新自定义元素的 property
store.subscribe(() => {
const state = store.getState();
myCounterEl.count = state.counter.value; // 直接赋值触发更新
});
前提是 <my-counter></my-counter> 正确定义了 count property，并在 setter 中触发 this.requestUpdate()（LitElement）或 this.render()（原生）。
把状态变更映射为 CustomEvent 发出
Web Components 应主动将用户交互转化为标准事件，供状态管理库捕获： - 不要用 `this.dispatchEvent(new Event('change'))` 这类模糊事件 - 推荐使用带 detail 的 `CustomEvent`，明确携带变更数据： ```js this.dispatchEvent( new CustomEvent('count-change', { detail: { value: this.count + 1 }, bubbles: true, composed: true }) ); ``` Redux middleware 或 RxJS `fromEvent` 可监听该事件并 dispatch action： ```ts fromEvent用组合式封装降低耦合度
避免组件直接 import store 或 subscribe —— 抽离为可复用的“连接器”： - LitElement 可封装 `connectStore` mixin，自动绑定 state 到 `@property` - 原生类可用 `defineCustomElement` + `store.subscribe` 在 `connectedCallback` 中注册，在 `disconnectedCallback` 清理 - beads-ui 的 Bead 模式更进一步：一个 Bead 就是一个状态单元，`connect(el)` 方法内部完成双向绑定，组件只关心 Bead 实例，不感知底层 storeShadow DOM 下的状态隔离与穿透
若启用 Shadow DOM，注意： - 外部 CSS 无法穿透样式，需用 `:host` 或 `::part()` 暴露接口 - 事件默认不冒泡出 Shadow Root，设 `composed: true` 才能被外部监听 - Redux store 实例可全局共享，但每个组件实例应有独立的 property 映射逻辑，避免多个 `状态管理库负责“数据在哪变”，Web Components 负责“数据怎么显、用户怎么改”。只要守住 attribute/property 输入 + CustomEvent 输出这条契约，就能稳定协同。
