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 {