fix(custom-element): optimize slot retrieval to avoid duplicates (#13961)

close #13955

Author: edison1105

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

@@ -1614,6 +1614,44 @@ describe('defineCustomElement', () => {
  app.unmount()
  })
 
+ test('teleport target is ancestor of custom element host', async () => {
+ const Child = defineCustomElement(
+ {
+ render() {
+ return [
+ h(Teleport, { to: '#t1' }, [renderSlot(this.$slots, 'header')]),
+ ]
+ },
+ },
+ { shadowRoot: false },
+ )
+ customElements.define('my-el-teleport-child-target', Child)
+
+ const App = {
+ render() {
+ return h('div', { id: 't1' }, [
+ h('my-el-teleport-child-target', null, {
+ default: () => [h('div', { slot: 'header' }, 'header')],
+ }),
+ ])
+ },
+ }
+ const app = createApp(App)
+ app.mount(container)
+
+ const target1 = document.getElementById('t1')!
+ expect(target1.outerHTML).toBe(
+ `<div id="t1">` +
+ `<my-el-teleport-child-target data-v-app="">` +
+ `<!--teleport start--><!--teleport end-->` +
+ `</my-el-teleport-child-target>` +
+ `<div slot="header">header</div>` +
+ `</div>`,
+ )
+
+ app.unmount()
+ })
+
  test('toggle nested custom element with shadowRoot: false', async () => {
  customElements.define(
  'my-el-child-shadow-false',

packages/runtime-dom/src/apiCustomElement.ts

@@ -688,11 +688,18 @@ export class VueElement
  if (this._teleportTargets) {
  roots.push(...this._teleportTargets)
  }
- return roots.reduce<HTMLSlotElement[]>((res, i) => {
- res.push(...Array.from(i.querySelectorAll('slot')))
- return res
- }, [])
+
+ const slots = new Set<HTMLSlotElement>()
+ for (const root of roots) {
+ const found = root.querySelectorAll<HTMLSlotElement>('slot')
+ for (let i = 0; i < found.length; i++) {
+ slots.add(found[i])
+ }
+ }
+
+ return Array.from(slots)
  }
+
  /**
  * @internal
  */