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

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

@@ -1,16 +1,22 @@
 import {
+  Fragment,
+  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 +113,96 @@ 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('user attached properties', async () => {
     let instance: ComponentInternalInstance
     let instanceProxy: any

packages/runtime-core/src/componentPublicInstance.ts

@@ -17,7 +17,9 @@ import {
   EMPTY_OBJ,
   type IfAny,
   NOOP,
+  PatchFlags,
   type Prettify,
+  ShapeFlags,
   type UnionToIntersection,
   extend,
   hasOwn,
@@ -51,11 +53,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 { Fragment, type VNode, type VNodeArrayChildren } from './vnode'
 
 /**
  * Custom properties added to component instances in any way and can be accessed through `this`
@@ -358,12 +361,38 @@ const getPublicInstance = (
   return getPublicInstance(i.parent)
 }
 
+// dev only: in dev mode, a leading comment before a component's single root
+// element is preserved and turns the root into a `DEV_ROOT_FRAGMENT`, whose
+// `vnode.el` is the fragment's anchor rather than the actual rendered
+// element. In addition, the real root may itself be a single-root component
+// (or another `DEV_ROOT_FRAGMENT`), so both layers need to be unwrapped
+// recursively to reach the actual rendered element, mirroring the resolution
+// already done for attrs/scopeId fallthrough in `renderComponentRoot`.
+const resolveRootEl = (vnode: VNode): any => {
+  if (
+    vnode.type === Fragment &&
+    vnode.patchFlag > 0 &&
+    vnode.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+  ) {
+    const realRoot = filterSingleRoot(vnode.children as VNodeArrayChildren)
+    if (realRoot) {
+      return resolveRootEl(realRoot)
+    }
+  } else if (vnode.shapeFlag & ShapeFlags.COMPONENT && vnode.component) {
+    return resolveRootEl(vnode.component.subTree)
+  }
+  return vnode.el
+}
+
+const getDevRootFragmentEl = (i: ComponentInternalInstance) =>
+  i.subTree ? resolveRootEl(i.subTree) : i.vnode.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),