vue3.5中自定义元素defineCustomElement在子应用中报错

[an501920078]

问题描述

子应用中的自定义元素由vue的defineCustomElement构建，在升级vue版本到3.5后子应用无法加载自定义元素，报错Uncaught TypeError: Illegal invocation 排查后发现是由于vue3.5+中_applyStyles这个方法重构了，将原先的this.shadowRoot.appendChild更换为了this.shadowRoot.prepend导致micro-app劫持报错。 后续发现复现是需要在自定义元素中引入子组件编写style标签稳定复现，在复现仓库地址中已经给出复现。

复现步骤

1.在子应用中使用vue3.5+版本构建的自定义元素 2.自定义元素再引用.ce.vue结尾组件，子组件内包含style样式 3.出现报错

上传截图

报错位置 报错说明 vue3.5+版本与之前的对比

复现仓库

https://github.com/an501920078/microapp-test-demo

环境信息

• micro-app版本："1.0.0-rc.8"
• 主应用前端框架&版本："vite:"^5.4.4"
• 子应用前端框架&版本：vite:"^5.4.4"
• 构建工具&版本：vite:"^5.4.4"

[github-actions[bot]]

Hello @an501920078. In order to facilitate location and troubleshooting, we need you to provide a realistic GitHub repository. 您好 @an501920078, 为了方便定位和排查问题，我们需要您提供一个重现实例，请提供一个尽可能精简的 GitHub 仓库地址。

[an501920078]

@timhub66 已添加复现仓库

[timhub66]

@timhub66 已添加复现仓库

v1.0.0-rc.11 已修复