fix(runtime-core): resolve $el for dev root comment fragment

packages/runtime-core/__tests__/componentPublicInstance.spec.ts

@@ -1,16 +1,23 @@
 import {
+  Fragment,
+  Suspense,
+  TestNodeTypes,
   createApp,
+  createCommentVNode,
+  createElementBlock,
   defineComponent,
   getCurrentInstance,
   h,
   nodeOps,
+  openBlock,
   render,
   shallowReadonly,
 } from '@vue/runtime-test'
 import type {
   ComponentInternalInstance,
   ComponentOptions,
 } from '../src/component'
+import { PatchFlags } from '@vue/shared'
 
 describe('component: proxy', () => {
   test('data', () => {
@@ -107,6 +114,168 @@ describe('component: proxy', () => {
     expect(nextTickThis).toBe(instanceProxy)
   })
 
+  // #12680
+  test('$el should resolve to the real root element when root is a dev comment + single element fragment', () => {
+    let instanceProxy: any
+    const Comp = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [createCommentVNode(' comment '), h('div', 'real root')],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+      mounted() {
+        instanceProxy = this
+      },
+    }
+    render(h(Comp), nodeOps.createElement('div'))
+    expect(instanceProxy.$el.type).toBe(TestNodeTypes.ELEMENT)
+    expect(instanceProxy.$el.tag).toBe('div')
+  })
+
+  // #12680
+  test('$el should resolve through a single-root child component to its real root element', () => {
+    let instanceProxy: any
+    const Inner = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [createCommentVNode(' comment '), h('div', 'inner root')],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    }
+    const Outer = {
+      setup() {
+        return () => h(Inner)
+      },
+      mounted() {
+        instanceProxy = this
+      },
+    }
+    render(h(Outer), nodeOps.createElement('div'))
+    expect(instanceProxy.$el.type).toBe(TestNodeTypes.ELEMENT)
+    expect(instanceProxy.$el.tag).toBe('div')
+  })
+
+  // #12680
+  test('$el should resolve through nested dev comment fragments across component boundaries', () => {
+    let instanceProxy: any
+    const Inner = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [createCommentVNode(' comment '), h('div', 'inner root')],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    }
+    const Outer = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [createCommentVNode(' comment '), h(Inner)],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+      mounted() {
+        instanceProxy = this
+      },
+    }
+    render(h(Outer), nodeOps.createElement('div'))
+    expect(instanceProxy.$el.type).toBe(TestNodeTypes.ELEMENT)
+    expect(instanceProxy.$el.tag).toBe('div')
+  })
+
+  test('$el access should be safe while a root child component is mounting', () => {
+    const Child = {
+      setup() {
+        getCurrentInstance()!.parent!.proxy!.$el
+        return () => h('div')
+      },
+    }
+    const Parent = {
+      setup: () => () => h(Child),
+    }
+
+    expect(() => render(h(Parent), nodeOps.createElement('div'))).not.toThrow()
+  })
+
+  test('$el should resolve through a Suspense root', () => {
+    let instanceProxy: any
+    const Inner = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [createCommentVNode(' comment '), h('div', 'inner root')],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    }
+    const Outer = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: () => h(Inner),
+          })
+      },
+      mounted() {
+        instanceProxy = this
+      },
+    }
+
+    render(h(Outer), nodeOps.createElement('div'))
+    expect(instanceProxy.$el.type).toBe(TestNodeTypes.ELEMENT)
+    expect(instanceProxy.$el.tag).toBe('div')
+  })
+
+  test('$el should preserve the unresolved async root value without a dev root fragment', () => {
+    let instance: ComponentInternalInstance
+    let instanceProxy: any
+    const Child = {
+      name: 'Child',
+      async setup() {
+        await new Promise(() => {})
+      },
+    }
+    const Parent = {
+      setup: () => () => h(Child),
+      mounted() {
+        instance = getCurrentInstance()!
+        instanceProxy = this
+      },
+    }
+
+    render(h(Parent), nodeOps.createElement('div'))
+
+    expect(
+      `A component with async setup() must be nested in a <Suspense>`,
+    ).toHaveBeenWarned()
+    expect(instance!.vnode.el).toBeNull()
+    expect(instanceProxy.$el === instance!.vnode.el).toBe(true)
+  })
+
   test('user attached properties', async () => {
     let instance: ComponentInternalInstance
     let instanceProxy: any

packages/runtime-core/src/componentPublicInstance.ts

@@ -17,6 +17,7 @@ import {
   EMPTY_OBJ,
   type IfAny,
   NOOP,
+  PatchFlags,
   type Prettify,
   type UnionToIntersection,
   extend,
@@ -51,11 +52,12 @@ import {
 } from './componentOptions'
 import type { EmitFn, EmitsOptions } from './componentEmits'
 import type { SlotsType, UnwrapSlotsType } from './componentSlots'
-import { markAttrsAccessed } from './componentRenderUtils'
+import { filterSingleRoot, markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { warn } from './warning'
 import { installCompatInstanceProperties } from './compat/instance'
 import type { Directive } from './directives'
+import type { VNode, VNodeArrayChildren } from './vnode'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -358,12 +360,50 @@ const getPublicInstance = (
   return getPublicInstance(i.parent)
 }
 
+// Component and Suspense roots can hide a dev root fragment. Only return a
+// resolved element after finding one so other root chains keep their existing
+// `$el` semantics.
+const resolveDevRootEl = (vnode: VNode): VNode['el'] | undefined => {
+  let found = false
+
+  while (true) {
+    if (vnode.patchFlag > 0 && vnode.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT) {
+      const root = filterSingleRoot(vnode.children as VNodeArrayChildren)
+      if (!root) {
+        return
+      }
+      vnode = root
+      found = true
+      continue
+    }
+
+    const component = vnode.component
+    if (component && component.subTree) {
+      vnode = component.subTree
+      continue
+    }
+
+    const suspense = vnode.suspense
+    if (suspense && suspense.activeBranch) {
+      vnode = suspense.activeBranch
+      continue
+    }
+
+    return found ? vnode.el : undefined
+  }
+}
+
+const getDevRootFragmentEl = (i: ComponentInternalInstance) => {
+  const el = i.subTree && resolveDevRootEl(i.subTree)
+  return el === undefined ? i.vnode.el : el
+}
+
 export const publicPropertiesMap: PublicPropertiesMap =
   // Move PURE marker to new line to workaround compiler discarding it
   // due to type annotation
   /*@__PURE__*/ extend(Object.create(null), {
     $: i => i,
-    $el: i => i.vnode.el,
+    $el: i => (__DEV__ ? getDevRootFragmentEl(i) : i.vnode.el),
     $data: i => i.data,
     $props: i => (__DEV__ ? shallowReadonly(i.props) : i.props),
     $attrs: i => (__DEV__ ? shallowReadonly(i.attrs) : i.attrs),