From 1929c0a64dd302475df637453d85aa6a76e1bb88 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 10:31:39 +0800 Subject: [PATCH 01/16] fix(runtime-dom): the _parseSlots of customElement(shadowRoot:false) executed correctly --- packages/runtime-dom/src/apiCustomElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 97389c8e6ec..8efaa49b3df 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -272,7 +272,7 @@ export class VueElement } connectedCallback(): void { - if (!this.shadowRoot) { + if (!this.shadowRoot && !this._slots) { this._parseSlots() } this._connected = true From 7c743d90b24a32e0775dd5dd2537bbbdf3122c4d Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 11:26:03 +0800 Subject: [PATCH 02/16] chore: update test --- .../__tests__/customElement.spec.ts | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index ac66230e32b..811bb903d35 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -975,6 +975,43 @@ describe('defineCustomElement', () => { `defaulttext` + `` + `
fallback
`, ) }) + test('should render slots with nested customElement', async () => { + const Son = defineCustomElement( + { + render() { + return renderSlot(this.$slots, 'default') + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-son', Son) + const Parent = defineCustomElement( + { + render() { + return renderSlot(this.$slots, 'default') + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-parent', Parent) + + const App = { + render() { + return h('my-parent', null, { + default: () => [ + h('my-son', null, { + default: () => [h('span', null, 'default')], + }), + ], + }) + }, + } + createApp(App).mount(container) + const e = container.childNodes[0] as VueElement + expect(e.innerHTML).toBe( + `default`, + ) + }) }) describe('helpers', () => { From 69fb5142dfed538aee05903fce402e211e53721d Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 11:34:56 +0800 Subject: [PATCH 03/16] chore: update --- packages/runtime-dom/__tests__/customElement.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 811bb903d35..ed7cd1fa998 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1006,11 +1006,13 @@ describe('defineCustomElement', () => { }) }, } - createApp(App).mount(container) + const app = createApp(App) + app.mount(container) const e = container.childNodes[0] as VueElement expect(e.innerHTML).toBe( `default`, ) + app.unmount() }) }) From 62565744527d2ba27691a4b4084bd6b264269264 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 11:42:19 +0800 Subject: [PATCH 04/16] chore: update test --- packages/runtime-dom/__tests__/customElement.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index ed7cd1fa998..6f90db57ace 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1008,6 +1008,7 @@ describe('defineCustomElement', () => { } const app = createApp(App) app.mount(container) + await new Promise(r => setTimeout(r)) const e = container.childNodes[0] as VueElement expect(e.innerHTML).toBe( `default`, From 245531a6f259a593778d7e61b8bba2c150206c96 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 16:17:33 +0800 Subject: [PATCH 05/16] chore: update --- packages/runtime-core/src/component.ts | 3 +++ packages/runtime-core/src/components/Teleport.ts | 3 +++ packages/runtime-dom/src/apiCustomElement.ts | 4 +++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index cccb7280fd4..e0fa1b40720 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -94,6 +94,7 @@ import type { BaseTransitionProps } from './components/BaseTransition' import type { DefineComponent } from './apiDefineComponent' import { markAsyncBoundary } from './helpers/useId' import { isAsyncWrapper } from './apiAsyncComponent' +import type { RendererElement } from 'vue' export type Data = Record @@ -1263,4 +1264,6 @@ export interface ComponentCustomElementInterface { shouldReflect?: boolean, shouldUpdate?: boolean, ): void + + _teleportTarget?: RendererElement } diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 3393b7272bd..d268322cb12 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -119,6 +119,9 @@ export const TeleportImpl = { // Teleport *always* has Array children. This is enforced in both the // compiler and vnode children normalization. if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { + if (parentComponent && parentComponent.isCE) { + parentComponent.ce!._teleportTarget = container + } mountChildren( children as VNodeArrayChildren, container, diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 8efaa49b3df..08b4f0f1730 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -238,6 +238,8 @@ export class VueElement private _ob?: MutationObserver | null = null private _slots?: Record + _teleportTarget?: HTMLElement + constructor( /** * Component def - note this may be an AsyncWrapper, and this._def will @@ -618,7 +620,7 @@ export class VueElement * Only called when shaddowRoot is false */ private _renderSlots() { - const outlets = this.querySelectorAll('slot') + const outlets = (this._teleportTarget || this).querySelectorAll('slot') const scopeId = this._instance!.type.__scopeId for (let i = 0; i < outlets.length; i++) { const o = outlets[i] as HTMLSlotElement From 26c1be62e41562e78003d240b6a147cb871aab54 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 16:21:31 +0800 Subject: [PATCH 06/16] chore: update type --- packages/runtime-core/src/component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index e0fa1b40720..62397eee878 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -94,7 +94,7 @@ import type { BaseTransitionProps } from './components/BaseTransition' import type { DefineComponent } from './apiDefineComponent' import { markAsyncBoundary } from './helpers/useId' import { isAsyncWrapper } from './apiAsyncComponent' -import type { RendererElement } from 'vue' +import type { RendererElement } from './renderer' export type Data = Record From 75f0186968a98673e3924548ac9dbad180eafce4 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 16:25:31 +0800 Subject: [PATCH 07/16] chore: update comment --- packages/runtime-core/src/component.ts | 4 +++- packages/runtime-dom/src/apiCustomElement.ts | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 62397eee878..f0dbe3b340d 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -1264,6 +1264,8 @@ export interface ComponentCustomElementInterface { shouldReflect?: boolean, shouldUpdate?: boolean, ): void - + /** + * Only effective when shadowRoot is false. + */ _teleportTarget?: RendererElement } diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 08b4f0f1730..06f5e5cbefe 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -238,6 +238,9 @@ export class VueElement private _ob?: MutationObserver | null = null private _slots?: Record + /** + * Only effective when shadowRoot is false. + */ _teleportTarget?: HTMLElement constructor( From 3265a257b9627ec68c0b44ebb4d94cfdeec1cb11 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 16:33:22 +0800 Subject: [PATCH 08/16] chore: update test --- .../__tests__/customElement.spec.ts | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 6f90db57ace..7f32deca515 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -2,6 +2,7 @@ import type { MockedFunction } from 'vitest' import { type HMRRuntime, type Ref, + Teleport, type VueElement, createApp, defineAsyncComponent, @@ -1015,6 +1016,51 @@ describe('defineCustomElement', () => { ) app.unmount() }) + + test('should work with Teleport', async () => { + const target = document.createElement('div') + const Son = defineCustomElement( + { + render() { + return h( + Teleport, + { to: target }, + { + default: () => [renderSlot(this.$slots, 'default')], + }, + ) + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-son', Son) + const Parent = defineCustomElement( + { + render() { + return renderSlot(this.$slots, 'default') + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-parent', Parent) + + const App = { + render() { + return h('my-parent', null, { + default: () => [ + h('my-son', null, { + default: () => [h('span', null, 'default')], + }), + ], + }) + }, + } + const app = createApp(App) + app.mount(container) + await new Promise(r => setTimeout(r)) + expect(target.innerHTML).toBe(`default`) + app.unmount() + }) }) describe('helpers', () => { From d5d6aa2c38e47e47bd5654e330b3ec27515faf76 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Mon, 9 Sep 2024 16:40:03 +0800 Subject: [PATCH 09/16] chore: update --- packages/runtime-dom/__tests__/customElement.spec.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 7f32deca515..f04fb8f085d 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1019,7 +1019,7 @@ describe('defineCustomElement', () => { test('should work with Teleport', async () => { const target = document.createElement('div') - const Son = defineCustomElement( + const Y = defineCustomElement( { render() { return h( @@ -1033,8 +1033,8 @@ describe('defineCustomElement', () => { }, { shadowRoot: false }, ) - customElements.define('my-son', Son) - const Parent = defineCustomElement( + customElements.define('my-y', Y) + const P = defineCustomElement( { render() { return renderSlot(this.$slots, 'default') @@ -1042,13 +1042,13 @@ describe('defineCustomElement', () => { }, { shadowRoot: false }, ) - customElements.define('my-parent', Parent) + customElements.define('my-p', P) const App = { render() { - return h('my-parent', null, { + return h('my-p', null, { default: () => [ - h('my-son', null, { + h('my-y', null, { default: () => [h('span', null, 'default')], }), ], From 45c3f047dca00cc4a917a0621851cdf38d566fe9 Mon Sep 17 00:00:00 2001 From: linzhe Date: Mon, 9 Sep 2024 21:44:40 +0800 Subject: [PATCH 10/16] chore: update --- .../__tests__/e2e/ssr-custom-element.spec.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts index c39286d3d12..3c67436e446 100644 --- a/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts +++ b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts @@ -78,6 +78,49 @@ test('ssr custom element hydration', async () => { await assertInteraction('my-element-async') }) +test('ssr custom element hydration with Teleport', async () => { + await setContent( + `
default`, + ) + + await page().evaluate(() => { + const { h, defineSSRCustomElement, Teleport, renderSlot } = (window as any) + .Vue + const Y = defineSSRCustomElement( + { + render() { + return h( + Teleport, + { to: '#test' }, + { + default: () => [renderSlot(this.$slots, 'default')], + }, + ) + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-y', Y) + const P = defineSSRCustomElement( + { + render() { + return renderSlot(this.$slots, 'default') + }, + }, + { shadowRoot: false }, + ) + customElements.define('my-p', P) + }) + + function getInnerHTML() { + return page().evaluate(() => { + return (document.querySelector('#test') as any).innerHTML + }) + } + + expect(await getInnerHTML()).toBe('default') +}) + // #11641 test('pass key to custom element', async () => { const messages: string[] = [] From a5550ee3cb0cfd61112b2e4761ad56e403338662 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 11 Sep 2024 14:11:48 +0800 Subject: [PATCH 11/16] chore: minor tweaks --- packages/runtime-core/src/component.ts | 2 +- .../__tests__/customElement.spec.ts | 30 ++++++++++--------- packages/runtime-dom/src/apiCustomElement.ts | 10 +++---- .../__tests__/e2e/ssr-custom-element.spec.ts | 2 +- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index f0dbe3b340d..a1ce1de4eb9 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -1265,7 +1265,7 @@ export interface ComponentCustomElementInterface { shouldUpdate?: boolean, ): void /** - * Only effective when shadowRoot is false. + * @internal attached by the nested Teleport when shadowRoot is false. */ _teleportTarget?: RendererElement } diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index f04fb8f085d..187df3a332a 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -976,8 +976,9 @@ describe('defineCustomElement', () => { `defaulttext` + `` + `
fallback
`, ) }) - test('should render slots with nested customElement', async () => { - const Son = defineCustomElement( + + test('render nested customElement w/ shadowRoot false', async () => { + const Child = defineCustomElement( { render() { return renderSlot(this.$slots, 'default') @@ -985,7 +986,8 @@ describe('defineCustomElement', () => { }, { shadowRoot: false }, ) - customElements.define('my-son', Son) + customElements.define('my-child', Child) + const Parent = defineCustomElement( { render() { @@ -1000,7 +1002,7 @@ describe('defineCustomElement', () => { render() { return h('my-parent', null, { default: () => [ - h('my-son', null, { + h('my-child', null, { default: () => [h('span', null, 'default')], }), ], @@ -1009,17 +1011,17 @@ describe('defineCustomElement', () => { } const app = createApp(App) app.mount(container) - await new Promise(r => setTimeout(r)) + await nextTick() const e = container.childNodes[0] as VueElement expect(e.innerHTML).toBe( - `default`, + `default`, ) app.unmount() }) - test('should work with Teleport', async () => { + test('render nested Teleport w/ shadowRoot false', async () => { const target = document.createElement('div') - const Y = defineCustomElement( + const Child = defineCustomElement( { render() { return h( @@ -1033,8 +1035,8 @@ describe('defineCustomElement', () => { }, { shadowRoot: false }, ) - customElements.define('my-y', Y) - const P = defineCustomElement( + customElements.define('my-el-teleport-child', Child) + const Parent = defineCustomElement( { render() { return renderSlot(this.$slots, 'default') @@ -1042,13 +1044,13 @@ describe('defineCustomElement', () => { }, { shadowRoot: false }, ) - customElements.define('my-p', P) + customElements.define('my-el-teleport-parent', Parent) const App = { render() { - return h('my-p', null, { + return h('my-el-teleport-parent', null, { default: () => [ - h('my-y', null, { + h('my-el-teleport-child', null, { default: () => [h('span', null, 'default')], }), ], @@ -1057,7 +1059,7 @@ describe('defineCustomElement', () => { } const app = createApp(App) app.mount(container) - await new Promise(r => setTimeout(r)) + await nextTick() expect(target.innerHTML).toBe(`default`) app.unmount() }) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 06f5e5cbefe..360e78134c1 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -221,6 +221,11 @@ export class VueElement */ _nonce: string | undefined = this._def.nonce + /** + * @internal + */ + _teleportTarget?: HTMLElement + private _connected = false private _resolved = false private _numberProps: Record | null = null @@ -238,11 +243,6 @@ export class VueElement private _ob?: MutationObserver | null = null private _slots?: Record - /** - * Only effective when shadowRoot is false. - */ - _teleportTarget?: HTMLElement - constructor( /** * Component def - note this may be an AsyncWrapper, and this._def will diff --git a/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts index 3c67436e446..c875f1bee69 100644 --- a/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts +++ b/packages/vue/__tests__/e2e/ssr-custom-element.spec.ts @@ -78,7 +78,7 @@ test('ssr custom element hydration', async () => { await assertInteraction('my-element-async') }) -test('ssr custom element hydration with Teleport', async () => { +test('work with Teleport (shadowRoot: false)', async () => { await setContent( `
default`, ) From 50dd486043d2dc6fa5c97f1559ce5dececa7bf91 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 11 Sep 2024 15:56:44 +0800 Subject: [PATCH 12/16] chore: fix the underlying problem --- packages/runtime-dom/src/apiCustomElement.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 360e78134c1..bb135df84ea 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -277,7 +277,10 @@ export class VueElement } connectedCallback(): void { - if (!this.shadowRoot && !this._slots) { + // aviod resolving component if it's not connected + if (!this.isConnected) return + + if (!this.shadowRoot) { this._parseSlots() } this._connected = true From 207e122d979ad18323e27fc57a21996c93b23861 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 11 Sep 2024 16:33:36 +0800 Subject: [PATCH 13/16] test: update test case for #11871 --- .../__tests__/customElement.spec.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 187df3a332a..9cac03bbca0 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -11,6 +11,7 @@ import { h, inject, nextTick, + onMounted, provide, ref, render, @@ -978,8 +979,16 @@ describe('defineCustomElement', () => { }) test('render nested customElement w/ shadowRoot false', async () => { + const calls: string[] = [] + const Child = defineCustomElement( { + setup() { + calls.push('child rending') + onMounted(() => { + calls.push('child mounted') + }) + }, render() { return renderSlot(this.$slots, 'default') }, @@ -990,6 +999,12 @@ describe('defineCustomElement', () => { const Parent = defineCustomElement( { + setup() { + calls.push('parent rending') + onMounted(() => { + calls.push('parent mounted') + }) + }, render() { return renderSlot(this.$slots, 'default') }, @@ -1016,6 +1031,12 @@ describe('defineCustomElement', () => { expect(e.innerHTML).toBe( `default`, ) + expect(calls).toEqual([ + 'parent rending', + 'parent mounted', + 'child rending', + 'child mounted', + ]) app.unmount() }) From 3b3e9e2bc1748366505224c62249a0d30e1dbbf5 Mon Sep 17 00:00:00 2001 From: daiwei Date: Wed, 11 Sep 2024 16:35:42 +0800 Subject: [PATCH 14/16] chore: fix typos --- packages/runtime-dom/__tests__/customElement.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 9cac03bbca0..51113edef69 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -984,7 +984,7 @@ describe('defineCustomElement', () => { const Child = defineCustomElement( { setup() { - calls.push('child rending') + calls.push('child rendering') onMounted(() => { calls.push('child mounted') }) @@ -1000,7 +1000,7 @@ describe('defineCustomElement', () => { const Parent = defineCustomElement( { setup() { - calls.push('parent rending') + calls.push('parent rendering') onMounted(() => { calls.push('parent mounted') }) @@ -1032,9 +1032,9 @@ describe('defineCustomElement', () => { `default`, ) expect(calls).toEqual([ - 'parent rending', + 'parent rendering', 'parent mounted', - 'child rending', + 'child rendering', 'child mounted', ]) app.unmount() From 982571454f730d0cabe7ffbc55c021ab93df5e25 Mon Sep 17 00:00:00 2001 From: daiwei Date: Thu, 12 Sep 2024 08:55:27 +0800 Subject: [PATCH 15/16] fix: typos --- packages/runtime-dom/src/apiCustomElement.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index bb135df84ea..074860bc5d3 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -277,7 +277,7 @@ export class VueElement } connectedCallback(): void { - // aviod resolving component if it's not connected + // avoid resolving component if it's not connected if (!this.isConnected) return if (!this.shadowRoot) { @@ -609,7 +609,7 @@ export class VueElement } /** - * Only called when shaddowRoot is false + * Only called when shadowRoot is false */ private _parseSlots() { const slots: VueElement['_slots'] = (this._slots = {}) @@ -623,7 +623,7 @@ export class VueElement } /** - * Only called when shaddowRoot is false + * Only called when shadowRoot is false */ private _renderSlots() { const outlets = (this._teleportTarget || this).querySelectorAll('slot') From 7ff7496b7378a6ce4b7819366103b2bf2d28ac64 Mon Sep 17 00:00:00 2001 From: daiwei Date: Fri, 13 Sep 2024 09:18:20 +0800 Subject: [PATCH 16/16] chore: minor tweaks --- packages/runtime-dom/src/apiCustomElement.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 074860bc5d3..6ddaf897130 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -330,7 +330,7 @@ export class VueElement } // unmount this._app && this._app.unmount() - this._instance!.ce = undefined + if (this._instance) this._instance.ce = undefined this._app = this._instance = null } })