chore: minor tweaks

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
 }

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

@@ -976,16 +976,18 @@ describe('defineCustomElement', () => {
         `<span>default</span>text` + `<!---->` + `<div>fallback</div>`,
       )
     })
-    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')
           },
         },
         { 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(
-        `<my-son data-v-app=""><span>default</span></my-son>`,
+        `<my-child data-v-app=""><span>default</span></my-child>`,
       )
       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,22 +1035,22 @@ 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')
           },
         },
         { 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(`<span>default</span>`)
       app.unmount()
     })

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<string, true> | null = null
@@ -238,11 +243,6 @@ export class VueElement
   private _ob?: MutationObserver | null = null
   private _slots?: Record<string, Node[]>
 
-  /**
-   * Only effective when shadowRoot is false.
-   */
-  _teleportTarget?: HTMLElement
-
   constructor(
     /**
      * Component def - note this may be an AsyncWrapper, and this._def will

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(
     `<div id='test'></div><my-p><my-y><span>default</span></my-y></my-p>`,
   )