自定义Input在Shadow DOM中失效？React组件问题咨询

输入失效极大概率和Shadow DOM的特性直接相关，核心原因集中在以下几点：

• Shadow DOM的事件边界限制：React的合成事件系统依赖事件冒泡到根节点完成处理，但Shadow DOM默认会拦截跨边界的事件传递。如果组件库的模态框/折叠面板使用了mode: 'closed'的Shadow DOM，React将无法捕获到输入框的onChange事件，导致状态更新逻辑完全失效。
• 组件库的内部事件拦截：部分带Shadow DOM的组件库会实现焦点管理（比如模态框的焦点陷阱）或事件拦截逻辑，可能误阻止了输入框的交互事件触发。
• React与Shadow DOM的适配问题：React对Shadow DOM的原生支持有限，直接将React组件作为children嵌入Shadow DOM容器时，事件绑定可能无法穿透Shadow DOM边界，导致回调函数无法执行。

要精准定位问题，需要补充以下信息：

• 使用的组件库具体名称，以及模态框/折叠面板组件的实际调用代码片段；
• 浏览器控制台是否存在报错信息（比如事件绑定失败、节点找不到等）；
• 通过浏览器开发者工具查看对应Shadow DOM的模式（open还是closed）；
• 是否尝试过用原生DOM事件绑定（比如通过ref给输入框添加addEventListener），验证事件是否能正常触发。

内容的提问来源于stack exchange，提问作者Maksymilian Mróz