fix(customElement): preserve appContext during hmr reload

[edison1105]

close #12453

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+70 B)	38 kB (+18 B)	34.2 kB (-22 B)
vue.global.prod.js	158 kB (+70 B)	57.8 kB (+17 B)	51.5 kB (+30 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.2 kB	18.3 kB	16.8 kB
createApp	55.2 kB	21.3 kB	19.5 kB
createSSRApp	59.3 kB	23.1 kB	21 kB
defineCustomElement	60.1 kB (+72 B)	22.9 kB (+14 B)	20.9 kB (+17 B)
overall	69.1 kB	26.5 kB	24.1 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12455

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12455

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12455

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12455

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12455

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12455

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12455

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12455

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12455

vue

pnpm add https://pkg.pr.new/vue@12455

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12455

commit: b07d1db

[edison1105]

The reason for checking this._app here is that the test case will not pass.

core/packages/runtime-dom/__tests__/customElement.spec.ts

Lines 137 to 147 in b7b0932

	test('remove then insert again', async () => {
	container.innerHTML = `<my-element></my-element>`
	const e = container.childNodes[0] as VueElement
	container.removeChild(e)
	await nextTick()
	expect(e._instance).toBe(null)
	expect(e.shadowRoot!.innerHTML).toBe('')
	container.appendChild(e)
	expect(e._instance).toBeTruthy()
	expect(e.shadowRoot!.innerHTML).toBe('<div>hello</div>')
	})

When re-inserting, this._app is null because we cleared it in disconnectedCallback.
For custom elements that remove and then re-insert (this._resolved = true), just calling _update is not enough.

core/packages/runtime-dom/src/apiCustomElement.ts

Lines 300 to 303 in 2235643

	if (this._resolved) {
	this._setParent()
	this._update()
	} else {

We must also reinitialize this._ob because it is cleared in disconnectedCallback.
For more edge cases refer to #12412. Maybe once #12413 is merged, the check for this._app can be removed.

Copilot reviewed 2 out of 2 changed files in this pull request and generated no suggestions.

Comments skipped due to low confidence (1)

packages/runtime-dom/src/apiCustomElement.ts:524

• The new behavior introduced in the '_update' method should be covered by tests to ensure that 'vnode.appContext' is correctly set.

if (this._app && !this._instance) vnode.appContext = this._app._context