diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 943dfdc51f7..907b299b824 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1425,6 +1425,41 @@ describe('defineCustomElement', () => {
expect(e.shadowRoot?.innerHTML).toBe('
app-injected
')
})
+
+ test('with hmr reload', async () => {
+ const __hmrId = '__hmrWithApp'
+ const def = defineComponent({
+ __hmrId,
+ setup() {
+ const msg = inject('msg')
+ return { msg }
+ },
+ render(this: any) {
+ return h('div', [h('span', this.msg), h('span', this.$foo)])
+ },
+ })
+ const E = defineCustomElement(def, {
+ configureApp(app) {
+ app.provide('msg', 'app-injected')
+ app.config.globalProperties.$foo = 'foo'
+ },
+ })
+ customElements.define('my-element-with-app-hmr', E)
+
+ container.innerHTML = ``
+ const el = container.childNodes[0] as VueElement
+ expect(el.shadowRoot?.innerHTML).toBe(
+ `app-injectedfoo
`,
+ )
+
+ // hmr
+ __VUE_HMR_RUNTIME__.reload(__hmrId, def as any)
+
+ await nextTick()
+ expect(el.shadowRoot?.innerHTML).toBe(
+ `app-injectedfoo
`,
+ )
+ })
})
// #9885
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index cd21d0d1ce1..f0724663090 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -533,7 +533,9 @@ export class VueElement
}
private _update() {
- render(this._createVNode(), this._root)
+ const vnode = this._createVNode()
+ if (this._app) vnode.appContext = this._app._context
+ render(vnode, this._root)
}
private _createVNode(): VNode {