packages/runtime-dom/src/apiCustomElement.ts (2)

227-227: Broaden target type: HTMLElement[] → Element[] (SVG/MathML-safe)

Teleport targets can be SVGElement/MathMLElement. Narrowing to HTMLElement[] is brittle; use Element[] to match RendererElement.

Apply:

-  _teleportTargets?: HTMLElement[]
+  _teleportTargets?: Element[]

---

720-726: Make getSlots accept Element[] and skip disconnected roots

Align with broadened type and avoid unnecessary queries on stale containers.

Apply:

-function getSlots(roots: HTMLElement[] | undefined): HTMLSlotElement[] {
-  if (!roots) return []
-  return roots.reduce<HTMLSlotElement[]>((res, i) => {
-    res.push(...Array.from(i.querySelectorAll('slot')))
-    return res
-  }, [])
-}
+function getSlots(roots: Element[] | undefined): HTMLSlotElement[] {
+  if (!roots) return []
+  return roots
+    .filter(r => (r as any).isConnected !== false)
+    .reduce<HTMLSlotElement[]>((res, el) => {
+      res.push(...Array.from(el.querySelectorAll('slot')))
+      return res
+    }, [])
+}

packages/runtime-core/src/components/Teleport.ts (1)

318-337: Missing: cleanup CE targets on Teleport unmount

Stale containers remain in _teleportTargets, causing unnecessary scans and potential duplicates later.

Apply:

     if (target) {
       hostRemove(targetStart!)
       hostRemove(targetAnchor!)
     }
+    // remove from CE target list if applicable
+    if (parentComponent && parentComponent.isCE && target) {
+      const ce = parentComponent.ce!
+      const list = ce._teleportTargets
+      if (list) {
+        const idx = list.indexOf(target)
+        if (idx > -1) list.splice(idx, 1)
+      }
+    }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

packages/runtime-dom/__tests__/customElement.spec.ts (3)

1284-1303: Fix typos in test name and custom element tag.

Rename “tow” -> “two” for clarity and consistent naming.

-    test('render nested tow Teleports w/ shadowRoot false', async () => {
+    test('render nested two Teleports w/ shadowRoot false', async () => {
...
-      customElements.define('my-el-tow-teleport-child', Child)
+      customElements.define('my-el-two-teleport-child', Child)
...
-          return h('my-el-tow-teleport-child', null, {
+          return h('my-el-two-teleport-child', null, {

Also applies to: 1298-1298, 1303-1303

---

1313-1320: Strengthen assertions: prefer innerHTML and verify cleanup on unmount.

• Assert target contents via innerHTML (consistent with neighboring tests).
• Verify teleported nodes are removed after app.unmount().

-      expect(target1.outerHTML).toBe(
-        `<div><div slot="header">header</div></div>`,
-      )
-      expect(target2.outerHTML).toBe(
-        `<span><span slot="body">body</span></span>`,
-      )
-      app.unmount()
+      expect(target1.innerHTML).toBe(`<div slot="header">header</div>`)
+      expect(target2.innerHTML).toBe(`<span slot="body">body</span>`)
+      app.unmount()
+      await nextTick()
+      expect(target1.innerHTML).toBe('')
+      expect(target2.innerHTML).toBe('')

---

1291-1293: Add coverage: slots outside Teleports must still render (regression #13899).

This PR fixes slot collection across host + multiple teleport targets. Add a test mixing host-rendered slots with teleported ones to prevent regressions.

// Additional test (can be placed after the current two-teleports test)
test('render slots both outside and inside Teleports w/ shadowRoot false', async () => {
  const targetA = document.createElement('div')
  const targetB = document.createElement('div')

  const MixedChild = defineCustomElement(
    {
      render() {
        return [
          renderSlot(this.$slots, 'headerOutside'),
          h(Teleport, { to: targetA }, [renderSlot(this.$slots, 'headerInside')]),
          h(Teleport, { to: targetB }, [renderSlot(this.$slots, 'bodyInside')]),
          renderSlot(this.$slots, 'footerOutside'),
        ]
      },
    },
    { shadowRoot: false },
  )
  customElements.define('my-el-mixed-teleports-child', MixedChild)

  const App = {
    render() {
      return h('my-el-mixed-teleports-child', null, {
        default: () => [
          h('div', { slot: 'headerOutside' }, 'H-out'),
          h('div', { slot: 'headerInside' }, 'H-in'),
          h('span', { slot: 'bodyInside' }, 'B-in'),
          h('span', { slot: 'footerOutside' }, 'F-out'),
        ],
      })
    },
  }

  const app = createApp(App)
  app.mount(container)
  await nextTick()

  const ce = container.querySelector('my-el-mixed-teleports-child') as VueElement
  expect(ce.innerHTML).toBe(
    `<div slot="headerOutside">H-out</div><span slot="footerOutside">F-out</span>`,
  )
  expect(targetA.innerHTML).toBe(`<div slot="headerInside">H-in</div>`)
  expect(targetB.innerHTML).toBe(`<span slot="bodyInside">B-in</span>`)

  app.unmount()
  await nextTick()
  expect(targetA.innerHTML).toBe('')
  expect(targetB.innerHTML).toBe('')
})

Also applies to: 1303-1307

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

packages/runtime-dom/src/apiCustomElement.ts (1)

666-678: Tighten types and avoid minor overhead in _getSlots

• Use Element[] (not HTMLElement[]) to match the widened _teleportTargets type and support SVG targets.
• Fast-path when there are no teleport targets; also switch to a simple for...of for clarity.

-  private _getSlots(): HTMLSlotElement[] {
-    const roots: HTMLElement[] = [this]
-    if (this._teleportTargets) {
-      roots.push(...this._teleportTargets)
-    }
-    return roots.reduce<HTMLSlotElement[]>((res, i) => {
-      res.push(...Array.from(i.querySelectorAll('slot')))
-      return res
-    }, [])
-  }
+  private _getSlots(): HTMLSlotElement[] {
+    const targets = this._teleportTargets
+    if (!targets || targets.size === 0) {
+      return Array.from(this.querySelectorAll('slot'))
+    }
+    const roots: Element[] = [this, ...targets]
+    const slots: HTMLSlotElement[] = []
+    for (const root of roots) {
+      slots.push(...root.querySelectorAll('slot'))
+    }
+    return slots
+  }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro