wujie是如何解决主应用与子应用之间的样式隔离的

[hickiy]

在都是使用shadow-dom + web component 的情况下， qiankun 、micro-app都没有很好避免主应用样式影响子应用这个问题，wujie的实现思路是怎样的（通过观瞻源码理解有点困难，想请教下官方大大指点一二）

[yiludege]

qiankun、micro-app 采用shadow-dom严格模式是可以做到严格隔离的，而且框架也提供了这样能力出来，不过在严格模式下，在react会存在一些问题

无界将子应用完整渲染在shadowdom内，拥有完整的 html、head、body，并且劫持 iframe 沙箱的 document 事件监听机制，从而避免了这些问题，当然里面还有很多细节要处理，所以无界直接采用shadow-dom的样式隔离方案

[hickiy]

qiankun、micro-app 采用shadow-dom严格模式是可以做到严格隔离的，而且框架也提供了这样能力出来，不过在严格模式下，在react会存在一些问题

无界将子应用完整渲染在shadowdom内，拥有完整的 html、head、body，并且劫持 iframe 沙箱的 document 事件监听机制，从而避免了这些问题，当然里面还有很多细节要处理，所以无界直接采用shadow-dom的样式隔离方案

谢谢您的答复，我在仔细研究一下shadow-dom，希望能够为wujie做出贡献！

[Ybbbb]

无界将子应用完整渲染在shadowdom内，拥有完整的 html、head、body，并且劫持 iframe 沙箱的 document 事件监听机制，从而避免了这些问题，当然里面还有很多细节要处理，所以无界直接采用shadow-dom的样式隔离方案

大佬可以解释下无界是怎么将子应用渲染在webcomponent内，实例跑在iframe中，并且两者可以无缝互联的吗，我看了官方文档的解释，不是很理解

是通过配置的url获取到页面内容后解析，把html相关的放在webcomponent中，然后js代码部分放在iframe中跑吗？

或者是子应用直接在iframe中跑，然后把html那部分拿出来放在webcomponent里面渲染？

当页面触发click或者其他事件的时候，是怎么触发绑定的方法呢？实例跟上下文信息是在iframe中，劫持iframe中的document，我的理解是iframe中对元素的修改，可以应用到对应的webcomponent中，因为重写了document的查询类接口，那么webcomponent里面元素绑定的click等等事件，是在解析页面内容的时候，就直接转换后绑定为对应iframe中对应的方法吗？

[yiludege]

可以看看这两篇文章哈
https://zhuanlan.zhihu.com/p/618063377
https://zhuanlan.zhihu.com/p/442815952

[Ybbbb]

可以看看这两篇文章哈 https://zhuanlan.zhihu.com/p/618063377 https://zhuanlan.zhihu.com/p/442815952

好的，谢谢大佬