fix(custom-element): preserve appContext during update (#12455)

close #12453
This commit is contained in:
edison 2025-05-20 08:34:36 +08:00 committed by GitHub
parent 35aeae7fa3
commit 013749e75e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 1 deletions

View File

@ -1425,6 +1425,41 @@ describe('defineCustomElement', () => {
expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>') expect(e.shadowRoot?.innerHTML).toBe('<div>app-injected</div>')
}) })
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 = `<my-element-with-app-hmr></my-element-with-app-hmr>`
const el = container.childNodes[0] as VueElement
expect(el.shadowRoot?.innerHTML).toBe(
`<div><span>app-injected</span><span>foo</span></div>`,
)
// hmr
__VUE_HMR_RUNTIME__.reload(__hmrId, def as any)
await nextTick()
expect(el.shadowRoot?.innerHTML).toBe(
`<div><span>app-injected</span><span>foo</span></div>`,
)
})
}) })
// #9885 // #9885

View File

@ -533,7 +533,9 @@ export class VueElement
} }
private _update() { 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<any, any> { private _createVNode(): VNode<any, any> {