From 29149fb4f725e7f4532f3fb58ba9ffd397a13708 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthia@cynthia.dev>
Date: Sun, 20 Jul 2025 20:51:32 +0200
Subject: [PATCH 1/4] fix(compile-vapor): don't generate unnecessary closing
 tags in templates

---
 .../transformElement.spec.ts.snap             | 47 ++++++++++++++-----
 .../transforms/transformElement.spec.ts       | 33 +++++++++++--
 .../src/transforms/transformElement.ts        | 13 +++--
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 7aa56aa9c2f..00bf4b5eaf1 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -337,9 +337,9 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > invalid html nesting 1`] = `
 "import { insert as _insert, template as _template } from 'vue';
-const t0 = _template("<div>123</div>")
-const t1 = _template("<p></p>")
-const t2 = _template("<form></form>")
+const t0 = _template("<div>123")
+const t1 = _template("<p>")
+const t2 = _template("<form>")
 
 export function render(_ctx) {
   const n1 = t1()
@@ -352,9 +352,30 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > multiple roots 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><span>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t0()
+  return [n0, n1]
+}"
+`;
+
+exports[`compiler: element transform > props + child 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div id=\\"foo\\"><span>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > props + children 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span></div>", true)
+const t0 = _template("<div id=\\"foo\\"><span></span><main><b></b><div><div><span></span><span>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -364,7 +385,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props merging: class 1`] = `
 "import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -375,7 +396,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props merging: event handlers 1`] = `
 "import { withKeys as _withKeys, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -388,7 +409,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props merging: style 1`] = `
 "import { setStyle as _setStyle, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -399,7 +420,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>", true)
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -409,7 +430,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > v-bind="obj" 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -420,7 +441,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -431,7 +452,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -442,7 +463,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -453,7 +474,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > v-on="obj" 1`] = `
 "import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
index a693db4ad39..c079096b39c 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -576,19 +576,44 @@ describe('compiler: element transform', () => {
       `<div id="foo" class="bar" />`,
     )
 
-    const template = '<div id="foo" class="bar"></div>'
+    const template = '<div id="foo" class="bar">'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])
     expect(ir.block.effect).lengthOf(0)
   })
 
-  test('props + children', () => {
+  test('props + child', () => {
     const { code, ir } = compileWithElementTransform(
       `<div id="foo"><span/></div>`,
     )
 
-    const template = '<div id="foo"><span></span></div>'
+    const template = '<div id="foo"><span>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('props + children', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo"><span/><main><b/><div><div><span/><span/></div></div></main></div>`,
+    )
+
+    const template =
+      '<div id="foo"><span></span><main><b></b><div><div><span></span><span>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('multiple roots', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><span/></div><div><span /></div>`,
+    )
+
+    const template = '<div><span>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])
@@ -937,7 +962,7 @@ describe('compiler: element transform', () => {
       <form><form/></form>`,
     )
     expect(code).toMatchSnapshot()
-    expect(ir.template).toEqual(['<div>123</div>', '<p></p>', '<form></form>'])
+    expect(ir.template).toEqual(['<div>123', '<p>', '<form>'])
     expect(ir.block.dynamic).toMatchObject({
       children: [
         { id: 1, template: 1, children: [{ id: 0, template: 0 }] },
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 05153e729af..88b99b26a36 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -67,7 +67,12 @@ export const transformElement: NodeTransform = (node, context) => {
       getEffectIndex,
     )
 
-    let { parent } = context
+    let { index, parent } = context
+    const isLastChild =
+      parent &&
+      parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
+        .length ===
+        index + 1
     while (
       parent &&
       parent.parent &&
@@ -94,6 +99,8 @@ export const transformElement: NodeTransform = (node, context) => {
         node as PlainElementNode,
         propsResult,
         singleRoot,
+        // Multi-root always generates dedicated templates for each root
+        isLastChild || context.root === parent,
         context,
         getEffectIndex,
       )
@@ -196,6 +203,7 @@ function transformNativeElement(
   node: PlainElementNode,
   propsResult: PropsResult,
   singleRoot: boolean,
+  isLastChild: boolean,
   context: TransformContext,
   getEffectIndex: () => number,
 ) {
@@ -244,8 +252,7 @@ function transformNativeElement(
   }
 
   template += `>` + context.childrenTemplate.join('')
-  // TODO remove unnecessary close tag, e.g. if it's the last element of the template
-  if (!isVoidTag(tag)) {
+  if (!isVoidTag(tag) && !isLastChild) {
     template += `</${tag}>`
   }
 

From ebdb381b9c3a38556b0167f1244495eed2603272 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthia@cynthia.dev>
Date: Sun, 20 Jul 2025 20:52:20 +0200
Subject: [PATCH 2/4] chore(compiler-vapor): update snapshots and tests

---
 .../__snapshots__/compile.spec.ts.snap        |  46 ++++----
 .../compiler-vapor/__tests__/compile.spec.ts  |   2 +-
 .../__snapshots__/expression.spec.ts.snap     |   6 +-
 .../transformChildren.spec.ts.snap            |  10 +-
 .../__snapshots__/transformRef.spec.ts.snap   |   8 +-
 .../transformSlotOutlet.spec.ts.snap          |   8 +-
 .../transformTemplateRef.spec.ts.snap         |  10 +-
 .../__snapshots__/vBind.spec.ts.snap          | 102 +++++++++---------
 .../__snapshots__/vFor.spec.ts.snap           |  32 +++---
 .../__snapshots__/vHtml.spec.ts.snap          |   6 +-
 .../transforms/__snapshots__/vIf.spec.ts.snap |  34 +++---
 .../__snapshots__/vModel.spec.ts.snap         |   4 +-
 .../transforms/__snapshots__/vOn.spec.ts.snap |  66 ++++++------
 .../__snapshots__/vOnce.spec.ts.snap          |  18 ++--
 .../__snapshots__/vShow.spec.ts.snap          |   2 +-
 .../__snapshots__/vSlot.spec.ts.snap          |   8 +-
 .../__snapshots__/vText.spec.ts.snap          |   6 +-
 .../transforms/transformSlotOutlet.spec.ts    |   8 +-
 .../transforms/transformTemplateRef.spec.ts   |   6 +-
 .../__tests__/transforms/vBind.spec.ts        |   6 +-
 .../__tests__/transforms/vFor.spec.ts         |   4 +-
 .../__tests__/transforms/vHtml.spec.ts        |   4 +-
 .../__tests__/transforms/vIf.spec.ts          |  18 ++--
 .../__tests__/transforms/vSlot.spec.ts        |   4 +-
 .../__tests__/transforms/vText.spec.ts        |   4 +-
 25 files changed, 211 insertions(+), 211 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index b10a98d32cb..3085967fc0f 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compile > bindings 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -14,7 +14,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > custom directive > basic 1`] = `
 "import { resolveDirective as _resolveDirective, withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _directive_test = _resolveDirective("test")
@@ -27,7 +27,7 @@ export function render(_ctx) {
 
 exports[`compile > custom directive > component 1`] = `
 "import { resolveComponent as _resolveComponent, resolveDirective as _resolveDirective, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, withVaporDirectives as _withVaporDirectives, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const _component_Bar = _resolveComponent("Bar")
@@ -53,7 +53,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > custom directive > basic 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -64,7 +64,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > binding value 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -75,7 +75,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > dynamic parameters 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -86,7 +86,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > modifiers 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -97,7 +97,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -108,7 +108,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > static parameters 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -119,7 +119,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > static parameters and modifiers 1`] = `
 "import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -130,7 +130,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > v-cloak > basic 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div>test</div>", true)
+const t0 = _template("<div>test", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -140,7 +140,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > v-pre > basic 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>", true)
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -150,8 +150,8 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
 "import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
-const t1 = _template("<div> </div>")
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}")
+const t1 = _template("<div> ")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const _component_Comp = _resolveComponent("Comp")
@@ -181,7 +181,7 @@ export function render(_ctx) {
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
 "import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<button> </button>", true)
+const t0 = _template("<button> ", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -199,7 +199,7 @@ export function render(_ctx) {
 
 exports[`compile > execution order > basic 1`] = `
 "import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -214,7 +214,7 @@ export function render(_ctx) {
 
 exports[`compile > execution order > with v-once 1`] = `
 "import { child as _child, next as _next, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><span> </span> <br> </div>", true)
+const t0 = _template("<div><span> </span> <br> ", true)
 
 export function render(_ctx) {
   const n3 = t0()
@@ -252,9 +252,9 @@ exports[`compile > expression parsing > v-bind 1`] = `
 
 exports[`compile > fragment 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<p></p>")
-const t1 = _template("<span></span>")
-const t2 = _template("<div></div>")
+const t0 = _template("<p>")
+const t1 = _template("<span>")
+const t2 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -266,8 +266,8 @@ export function render(_ctx) {
 
 exports[`compile > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
 "import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<div><div></div><!><div></div><!><div><button></button></div></div>", true)
+const t0 = _template("<div>")
+const t1 = _template("<div><div></div><!><div></div><!><div><button>", true)
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
@@ -301,7 +301,7 @@ export function render(_ctx) {
 
 exports[`compile > static template 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div><p>hello</p><input><span></span></div>", true)
+const t0 = _template("<div><p>hello</p><input><span>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index 178021d13dd..e7120e0f9df 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -71,7 +71,7 @@ describe('compile', () => {
 
         expect(code).toMatchSnapshot()
         expect(code).contains(
-          JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}</div>'),
+          JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}'),
         )
         expect(code).not.contains('effect')
       })
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
index fda0121d632..a9568138810 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
@@ -33,7 +33,7 @@ export function render(_ctx) {
 
 exports[`compiler: expression > empty interpolation 3`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -43,7 +43,7 @@ export function render(_ctx) {
 
 exports[`compiler: expression > empty interpolation 4`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n1 = t0()
@@ -82,7 +82,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compiler: expression > update expression 1`] = `
 "import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n1 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
index 4a8caa65948..b286f59d9a2 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`compiler: children transform > anchor insertion in middle 1`] = `
 "import { child as _child, next as _next, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<div><div></div><!><div></div></div>", true)
+const t0 = _template("<div>")
+const t1 = _template("<div><div></div><!><div>", true)
 
 export function render(_ctx) {
   const n4 = t1()
@@ -19,7 +19,7 @@ export function render(_ctx) {
 
 exports[`compiler: children transform > children & sibling references 1`] = `
 "import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><p> </p> <p> </p></div>", true)
+const t0 = _template("<div><p> </p> <p> ", true)
 
 export function render(_ctx) {
   const n3 = t0()
@@ -39,7 +39,7 @@ export function render(_ctx) {
 
 exports[`compiler: children transform > efficient find 1`] = `
 "import { child as _child, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div>x</div><div>x</div><div> </div></div>", true)
+const t0 = _template("<div><div>x</div><div>x</div><div> ", true)
 
 export function render(_ctx) {
   const n1 = t0()
@@ -52,7 +52,7 @@ export function render(_ctx) {
 
 exports[`compiler: children transform > efficient traversal 1`] = `
 "import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </span></div><div><span> </span></div></div>", true)
+const t0 = _template("<div><div>x</div><div><span> </div><div><span> </div><div><span> ", true)
 
 export function render(_ctx) {
   const n3 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap
index a59b17d9429..3fbf89b7bcb 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformRef.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: template ref transform > dynamic ref 1`] = `
 "import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -14,7 +14,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > ref + v-for 1`] = `
 "import { setRef as _setRef, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = _createFor(() => ([1,2,3]), (_block) => {
@@ -28,7 +28,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > ref + v-if 1`] = `
 "import { setRef as _setRef, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (true), () => {
@@ -42,7 +42,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > static ref 1`] = `
 "import { setRef as _setRef, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
index 6d62b9c4e35..9ea913551bc 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformSlotOutlet.spec.ts.snap
@@ -11,7 +11,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform <slot> outlets > default slot outlet with fallback 1`] = `
 "import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createSlot("default", null, () => {
@@ -24,7 +24,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform <slot> outlets > default slot outlet with props & fallback 1`] = `
 "import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createSlot("default", { foo: () => (_ctx.bar) }, () => {
@@ -87,7 +87,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform <slot> outlets > named slot outlet with fallback 1`] = `
 "import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createSlot("foo", null, () => {
@@ -100,7 +100,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform <slot> outlets > named slot outlet with props & fallback 1`] = `
 "import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createSlot("foo", { foo: () => (_ctx.bar) }, () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
index 7184446fc09..61e25823ca6 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: template ref transform > dynamic ref 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -15,7 +15,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > function ref 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -35,7 +35,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > ref + v-for 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -50,7 +50,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > ref + v-if 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -74,7 +74,7 @@ exports[`compiler: template ref transform > static ref (inline mode) 1`] = `
 
 exports[`compiler: template ref transform > static ref 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index 4ea0db55fe5..c9698513d08 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`cache multiple access > cache variable used in both property shorthand and normal binding 1`] = `
 "import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -17,7 +17,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > dynamic key bindings with expressions 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -31,7 +31,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > dynamic property access 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -45,7 +45,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > function calls with arguments 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -65,7 +65,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > not cache variable and member expression with the same name 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -76,7 +76,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > not cache variable in function expression 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -87,7 +87,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > not cache variable only used in property shorthand 1`] = `
 "import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -98,7 +98,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > object property chain access 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -115,7 +115,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > object property name substring cases 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -130,7 +130,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > optional chaining 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -144,7 +144,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > repeated expression in expressions 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -163,7 +163,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > repeated expressions 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -179,7 +179,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > repeated variable in expressions 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -195,7 +195,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > repeated variables 1`] = `
 "import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = t0()
@@ -211,7 +211,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > variable name substring edge cases 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -225,7 +225,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -236,7 +236,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -247,7 +247,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -258,7 +258,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -269,7 +269,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -280,7 +280,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .attr modifier w/ value 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -291,7 +291,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .camel modifier 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -302,7 +302,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
 "import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -313,7 +313,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -324,7 +324,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -335,7 +335,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
 "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -346,7 +346,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -357,7 +357,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -368,7 +368,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -379,7 +379,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
 "import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -390,7 +390,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -401,7 +401,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -412,7 +412,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
 "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -423,7 +423,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -434,7 +434,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
 "import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -445,7 +445,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -456,7 +456,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ value 1`] = `
 "import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -467,7 +467,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > :innerHTML 1`] = `
 "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -478,7 +478,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > :textContext 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -500,7 +500,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > :value w/ progress 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -511,12 +511,12 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > attributes must be set as attribute 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 const t1 = _template("<input>")
-const t2 = _template("<textarea></textarea>")
+const t2 = _template("<textarea>")
 const t3 = _template("<img>")
-const t4 = _template("<video></video>")
-const t5 = _template("<canvas></canvas>")
+const t4 = _template("<video>")
+const t5 = _template("<canvas>")
 const t6 = _template("<source>")
 
 export function render(_ctx) {
@@ -551,7 +551,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > basic 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -562,7 +562,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > dynamic arg 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -577,7 +577,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -591,7 +591,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > no expression (shorthand) 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -602,7 +602,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > no expression 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -623,7 +623,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > should error if empty expression 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div arg></div>", true)
+const t0 = _template("<div arg>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -633,7 +633,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > with constant value 1`] = `
 "import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div f=\\"foo1\\" h=\\"1\\"></div>", true)
+const t0 = _template("<div f=\\"foo1\\" h=\\"1\\">", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index 69c695a246a..d409c542988 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
@@ -17,7 +17,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > array de-structured value 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
@@ -32,7 +32,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > basic v-for 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -49,7 +49,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > key only binding pattern 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>", true)
+const t0 = _template("<tr> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
@@ -64,7 +64,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > multi effect 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_for_item0, _for_key0) => {
@@ -81,8 +81,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > nested v-for 1`] = `
 "import { setInsertionState as _setInsertionState, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span> </span>")
-const t1 = _template("<div></div>", true)
+const t0 = _template("<span> ")
+const t1 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
@@ -102,7 +102,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
 "import { getRestElement as _getRestElement, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
@@ -117,7 +117,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > object de-structured value 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span> </span>", true)
+const t0 = _template("<span> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
@@ -132,7 +132,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > object value, key and index 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0, _for_index0) => {
@@ -147,7 +147,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > selector pattern 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>", true)
+const t0 = _template("<tr> ", true)
 
 export function render(_ctx) {
   let _selector0_0
@@ -167,7 +167,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > selector pattern 2`] = `
 "import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>", true)
+const t0 = _template("<tr>", true)
 
 export function render(_ctx) {
   let _selector0_0
@@ -186,7 +186,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > selector pattern 3`] = `
 "import { setClass as _setClass, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>", true)
+const t0 = _template("<tr>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
@@ -203,7 +203,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > selector pattern 4`] = `
 "import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>", true)
+const t0 = _template("<tr>", true)
 
 export function render(_ctx) {
   let _selector0_0
@@ -222,7 +222,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
 "import { getDefaultValue as _getDefaultValue, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
@@ -237,7 +237,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > w/o value 1`] = `
 "import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div>item</div>", true)
+const t0 = _template("<div>item", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
index ecf886d7cbb..e6327d3295b 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`v-html > should convert v-html to innerHTML 1`] = `
 "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -13,7 +13,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
 "import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -24,7 +24,7 @@ export function render(_ctx) {
 
 exports[`v-html > should raise error if has no expression 1`] = `
 "import { setHtml as _setHtml, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index c41dc9226c5..989243a5b12 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: v-if > basic v-if 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -17,12 +17,12 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > comment between branches 1`] = `
 "import { createIf as _createIf, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 const t1 = _template("<!--foo-->")
-const t2 = _template("<p></p>")
+const t2 = _template("<p>")
 const t3 = _template("<!--bar-->")
 const t4 = _template("fine")
-const t5 = _template("<div> </div>")
+const t5 = _template("<div> ")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -46,7 +46,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > dedupe same template 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hello</div>")
+const t0 = _template("<div>hello")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -63,9 +63,9 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 const t1 = _template("hello")
-const t2 = _template("<p> </p>", true)
+const t2 = _template("<p> ", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -82,8 +82,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if + v-else 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<p></p>")
+const t0 = _template("<div>")
+const t1 = _template("<p>")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -99,8 +99,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if + v-else-if + v-else 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<p></p>")
+const t0 = _template("<div>")
+const t1 = _template("<p>")
 const t2 = _template("fine")
 
 export function render(_ctx) {
@@ -120,8 +120,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if + v-else-if 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<p></p>")
+const t0 = _template("<div>")
+const t1 = _template("<p>")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -137,10 +137,10 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if + v-if / v-else[-if] 1`] = `
 "import { setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<span>foo</span>")
-const t1 = _template("<span>bar</span>")
-const t2 = _template("<span>baz</span>")
-const t3 = _template("<div></div>", true)
+const t0 = _template("<span>foo")
+const t1 = _template("<span>bar")
+const t2 = _template("<span>baz")
+const t3 = _template("<div>", true)
 
 export function render(_ctx) {
   const n8 = t3()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
index 5ef064974c0..9d569efc980 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -187,7 +187,7 @@ exports[`compiler: vModel transform > should support member expression w/ inline
 
 exports[`compiler: vModel transform > should support select 1`] = `
 "import { applySelectModel as _applySelectModel, template as _template } from 'vue';
-const t0 = _template("<select></select>", true)
+const t0 = _template("<select>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -209,7 +209,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support textarea 1`] = `
 "import { applyTextModel as _applyTextModel, template as _template } from 'vue';
-const t0 = _template("<textarea></textarea>", true)
+const t0 = _template("<textarea>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index e7a2b30e69c..db9174017ac 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`v-on > complex member expression w/ prefixIdentifiers: true 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -29,7 +29,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -45,7 +45,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -61,7 +61,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg with prefixing 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -77,9 +77,9 @@ export function render(_ctx) {
 
 exports[`v-on > event modifier 1`] = `
 "import { withModifiers as _withModifiers, on as _on, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<a></a>")
-const t1 = _template("<form></form>")
-const t2 = _template("<div></div>")
+const t0 = _template("<a>")
+const t1 = _template("<form>")
+const t2 = _template("<div>")
 const t3 = _template("<input>")
 _delegateEvents("click", "contextmenu", "mouseup", "keyup")
 
@@ -140,7 +140,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`v-on > expression with type 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
@@ -152,7 +152,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -164,7 +164,7 @@ export function render(_ctx) {
 
 exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -176,7 +176,7 @@ export function render(_ctx) {
 
 exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -188,7 +188,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -200,7 +200,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -212,7 +212,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -228,7 +228,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -240,7 +240,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -252,7 +252,7 @@ export function render(_ctx) {
 
 exports[`v-on > should delegate event 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -264,7 +264,7 @@ export function render(_ctx) {
 
 exports[`v-on > should handle multi-line statement 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -279,7 +279,7 @@ _ctx.bar()
 
 exports[`v-on > should handle multiple inline statement 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -291,7 +291,7 @@ export function render(_ctx) {
 
 exports[`v-on > should not prefix member expression 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -303,7 +303,7 @@ export function render(_ctx) {
 
 exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
 "import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("keyup")
 
 export function render(_ctx) {
@@ -315,7 +315,7 @@ export function render(_ctx) {
 
 exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
 "import { withModifiers as _withModifiers, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click", "keyup")
 
 export function render(_ctx) {
@@ -328,7 +328,7 @@ export function render(_ctx) {
 
 exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
 "import { withModifiers as _withModifiers, on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -342,7 +342,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.middle 1`] = `
 "import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("mouseup")
 
 export function render(_ctx) {
@@ -354,7 +354,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.middle 2`] = `
 "import { withModifiers as _withModifiers, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -370,7 +370,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.right 1`] = `
 "import { withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("contextmenu")
 
 export function render(_ctx) {
@@ -382,7 +382,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.right 2`] = `
 "import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -398,7 +398,7 @@ export function render(_ctx) {
 
 exports[`v-on > should use delegate helper when have multiple events of same name 1`] = `
 "import { delegate as _delegate, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -411,7 +411,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap as function if expression is inline statement 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -423,7 +423,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
 "import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -451,7 +451,7 @@ exports[`v-on > should wrap in unref if identifier is setup-maybe-ref w/ inline:
 
 exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = `
 "import { withModifiers as _withModifiers, withKeys as _withKeys, on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -464,7 +464,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
 "import { withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("keyup")
 
 export function render(_ctx) {
@@ -476,7 +476,7 @@ export function render(_ctx) {
 
 exports[`v-on > simple expression 1`] = `
 "import { delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 _delegateEvents("click")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index b6107d5a1a1..bcc96f1d509 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: v-once > as root node 1`] = `
 "import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -13,7 +13,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > basic 1`] = `
 "import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, setClass as _setClass, template as _template } from 'vue';
-const t0 = _template("<div> <span></span></div>", true)
+const t0 = _template("<div> <span>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n2 = t0()
@@ -27,7 +27,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compiler: v-once > inside v-once 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -37,7 +37,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > on component 1`] = `
 "import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
@@ -50,7 +50,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > on nested plain element 1`] = `
 "import { child as _child, setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
@@ -62,7 +62,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > with v-for 1`] = `
 "import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
@@ -75,7 +75,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > with v-if 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.expr), () => {
@@ -88,8 +88,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > with v-if/else 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<p></p>")
+const t0 = _template("<div>")
+const t1 = _template("<p>")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.expr), () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
index f595da5ef8f..07b46b02fb1 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vShow.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: v-show transform > simple expression 1`] = `
 "import { applyVShow as _applyVShow, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
index f296d7257d0..fbe6c86b007 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -105,7 +105,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform slot > implicit default slot 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
@@ -123,7 +123,7 @@ exports[`compiler: transform slot > named slots w/ implicit default slot 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
 const t0 = _template("foo")
 const t1 = _template("bar")
-const t2 = _template("<span></span>")
+const t2 = _template("<span>")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
@@ -255,7 +255,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform slot > slot + v-if / v-else[-if] should not cause error 1`] = `
 "import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createSlot as _createSlot, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const _component_Foo = _resolveComponent("Foo")
@@ -279,7 +279,7 @@ exports[`compiler: transform slot > with whitespace: 'preserve' > implicit defau
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
 const t0 = _template(" Header ")
 const t1 = _template(" ")
-const t2 = _template("<p></p>")
+const t2 = _template("<p>")
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
index 9a3b88acba3..b2cc3e7b7e4 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`v-text > should convert v-text to setText 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -14,7 +14,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
 "import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -26,7 +26,7 @@ export function render(_ctx) {
 
 exports[`v-text > should raise error if has no expression 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
index 389c665a12f..a396361288d 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -155,7 +155,7 @@ describe('compiler: transform <slot> outlets', () => {
   test('default slot outlet with fallback', () => {
     const { ir, code } = compileWithSlotsOutlet(`<slot><div/></slot>`)
     expect(code).toMatchSnapshot()
-    expect(ir.template[0]).toBe('<div></div>')
+    expect(ir.template[0]).toBe('<div>')
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id: 0,
@@ -175,7 +175,7 @@ describe('compiler: transform <slot> outlets', () => {
       `<slot name="foo"><div/></slot>`,
     )
     expect(code).toMatchSnapshot()
-    expect(ir.template[0]).toBe('<div></div>')
+    expect(ir.template[0]).toBe('<div>')
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id: 0,
@@ -195,7 +195,7 @@ describe('compiler: transform <slot> outlets', () => {
       `<slot :foo="bar"><div/></slot>`,
     )
     expect(code).toMatchSnapshot()
-    expect(ir.template[0]).toBe('<div></div>')
+    expect(ir.template[0]).toBe('<div>')
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id: 0,
@@ -216,7 +216,7 @@ describe('compiler: transform <slot> outlets', () => {
       `<slot name="foo" :foo="bar"><div/></slot>`,
     )
     expect(code).toMatchSnapshot()
-    expect(ir.template[0]).toBe('<div></div>')
+    expect(ir.template[0]).toBe('<div>')
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.SLOT_OUTLET_NODE,
       id: 0,
diff --git a/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts
index 2c883d10cc6..89ae95bd149 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts
@@ -30,7 +30,7 @@ describe('compiler: template ref transform', () => {
       id: 0,
       flags: DynamicFlag.REFERENCED,
     })
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
     expect(ir.block.operation).lengthOf(1)
     expect(ir.block.operation[0]).toMatchObject({
       type: IRNodeTypes.SET_TEMPLATE_REF,
@@ -66,7 +66,7 @@ describe('compiler: template ref transform', () => {
       id: 0,
       flags: DynamicFlag.REFERENCED,
     })
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
     expect(ir.block.operation).toMatchObject([
       {
         type: IRNodeTypes.DECLARE_OLD_REF,
@@ -104,7 +104,7 @@ describe('compiler: template ref transform', () => {
       id: 0,
       flags: DynamicFlag.REFERENCED,
     })
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
     expect(ir.block.operation).toMatchObject([
       {
         type: IRNodeTypes.DECLARE_OLD_REF,
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index e96186c275c..ed35d7a54e1 100644
--- a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -23,7 +23,7 @@ describe('compiler v-bind', () => {
       id: 0,
       flags: DynamicFlag.REFERENCED,
     })
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
     expect(ir.block.effect).lengthOf(1)
     expect(ir.block.effect[0].expressions).lengthOf(1)
     expect(ir.block.effect[0].operations).lengthOf(1)
@@ -241,10 +241,10 @@ describe('compiler v-bind', () => {
         end: { line: 1, column: 19 },
       },
     })
-    expect(ir.template).toEqual(['<div arg></div>'])
+    expect(ir.template).toEqual(['<div arg>'])
 
     expect(code).matchSnapshot()
-    expect(code).contains(JSON.stringify('<div arg></div>'))
+    expect(code).contains(JSON.stringify('<div arg>'))
   })
 
   test('error on invalid argument for same-name shorthand', () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts b/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
index 7357ad84fef..e0989fc623f 100644
--- a/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
@@ -32,7 +32,7 @@ describe('compiler: v-for', () => {
 
     expect(code).matchSnapshot()
     expect(helpers).contains('createFor')
-    expect(ir.template).toEqual(['<div> </div>'])
+    expect(ir.template).toEqual(['<div> '])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.FOR,
       id: 0,
@@ -156,7 +156,7 @@ describe('compiler: v-for', () => {
       `_createFor(() => (_for_item0.value), (_for_item1) => {`,
     )
     expect(code).contains(`_for_item1.value+_for_item0.value`)
-    expect(ir.template).toEqual(['<span> </span>', '<div></div>'])
+    expect(ir.template).toEqual(['<span> ', '<div>'])
     const parentOp = ir.block.dynamic.children[0].operation
     expect(parentOp).toMatchObject({
       type: IRNodeTypes.FOR,
diff --git a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
index 0de0b6abca6..6890187d69e 100644
--- a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -66,7 +66,7 @@ describe('v-html', () => {
     expect(helpers).contains('setHtml')
 
     // children should have been removed
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
 
     expect(ir.block.operation).toMatchObject([])
     expect(ir.block.effect).toMatchObject([
@@ -98,7 +98,7 @@ describe('v-html', () => {
 
     expect(code).matchSnapshot()
     // children should have been removed
-    expect(code).contains('template("<div></div>", true)')
+    expect(code).contains('template("<div>", true)')
   })
 
   test('should raise error if has no expression', () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
index e5fd61add2e..5b8fdc161bf 100644
--- a/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
@@ -32,7 +32,7 @@ describe('compiler: v-if', () => {
 
     expect(helpers).contains('createIf')
 
-    expect(ir.template).toEqual(['<div> </div>'])
+    expect(ir.template).toEqual(['<div> '])
 
     const op = ir.block.dynamic.children[0].operation
     expect(op).toMatchObject({
@@ -68,7 +68,7 @@ describe('compiler: v-if', () => {
     )
     expect(code).matchSnapshot()
 
-    expect(ir.template).toEqual(['<div></div>', 'hello', '<p> </p>'])
+    expect(ir.template).toEqual(['<div>', 'hello', '<p> '])
     expect(ir.block.effect).toEqual([])
     const op = ir.block.dynamic.children[0].operation as IfIRNode
     expect(op.positive.effect).toMatchObject([
@@ -103,7 +103,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok">hello</div><div v-if="ok">hello</div>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).toEqual(['<div>hello</div>'])
+    expect(ir.template).toEqual(['<div>hello'])
     expect(ir.block.returns).toEqual([0, 3])
   })
 
@@ -113,7 +113,7 @@ describe('compiler: v-if', () => {
   test('v-if + v-else', () => {
     const { code, ir, helpers } = compileWithVIf(`<div v-if="ok"/><p v-else/>`)
     expect(code).matchSnapshot()
-    expect(ir.template).toEqual(['<div></div>', '<p></p>'])
+    expect(ir.template).toEqual(['<div>', '<p>'])
 
     expect(helpers).contains('createIf')
     expect(ir.block.effect).lengthOf(0)
@@ -146,7 +146,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).toEqual(['<div></div>', '<p></p>'])
+    expect(ir.template).toEqual(['<div>', '<p>'])
 
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.IF,
@@ -185,7 +185,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).toEqual(['<div></div>', '<p></p>', 'fine'])
+    expect(ir.template).toEqual(['<div>', '<p>', 'fine'])
 
     expect(ir.block.returns).toEqual([0])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
@@ -237,13 +237,13 @@ describe('compiler: v-if', () => {
     `)
     expect(code).matchSnapshot()
     expect(ir.template).toEqual([
-      '<div></div>',
+      '<div>',
       '<!--foo-->',
-      '<p></p>',
+      '<p>',
       '<!--bar-->',
       'fine',
 
-      '<div> </div>',
+      '<div> ',
     ])
   })
 
diff --git a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
index 909162fe3ca..54a907636ee 100644
--- a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
@@ -35,7 +35,7 @@ describe('compiler: transform slot', () => {
     const { ir, code } = compileWithSlots(`<Comp><div/></Comp>`)
     expect(code).toMatchSnapshot()
 
-    expect(ir.template).toEqual(['<div></div>'])
+    expect(ir.template).toEqual(['<div>'])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.CREATE_COMPONENT_NODE,
       id: 1,
@@ -163,7 +163,7 @@ describe('compiler: transform slot', () => {
     )
     expect(code).toMatchSnapshot()
 
-    expect(ir.template).toEqual(['foo', 'bar', '<span></span>'])
+    expect(ir.template).toEqual(['foo', 'bar', '<span>'])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.CREATE_COMPONENT_NODE,
       id: 4,
diff --git a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
index 4f074fee87e..3681cf4bd5a 100644
--- a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
@@ -68,7 +68,7 @@ describe('v-text', () => {
     ])
 
     // children should have been removed
-    expect(ir.template).toEqual(['<div> </div>'])
+    expect(ir.template).toEqual(['<div> '])
 
     expect(ir.block.effect).toMatchObject([
       {
@@ -97,7 +97,7 @@ describe('v-text', () => {
 
     expect(code).matchSnapshot()
     // children should have been removed
-    expect(code).contains('template("<div> </div>", true)')
+    expect(code).contains('template("<div> ", true)')
   })
 
   test('should raise error if has no expression', () => {

From 753f6e46b550a10c61fb89e8f7918c32e5af63ad Mon Sep 17 00:00:00 2001
From: Cynthia <cynthia@cynthia.dev>
Date: Sun, 20 Jul 2025 22:22:20 +0200
Subject: [PATCH 3/4] fix(compiler-vapor): deal with formatting elements and
 ambiguous cases

---
 .../transformElement.spec.ts.snap             | 32 +++++++++++++-
 .../transforms/transformElement.spec.ts       | 40 +++++++++++++++++-
 .../src/transforms/transformElement.ts        | 42 ++++++++++++++++---
 packages/shared/src/domTagConfig.ts           |  9 ++++
 4 files changed, 114 insertions(+), 9 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 00bf4b5eaf1..19036e7465d 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -1,5 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: element transform > b in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><b></b></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > component > cache v-on expression with unique handler name 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 
@@ -375,7 +385,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props + children 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span><main><b></b><div><div><span></span><span>", true)
+const t0 = _template("<div id=\\"foo\\"><span><b></b></span><main><b></b><div><div><span></span><span>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -418,6 +428,26 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > pure nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><div></div></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+exports[`compiler: element transform > span in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><span></div><div>", true)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue';
 const t0 = _template("<div id=\\"foo\\" class=\\"bar\\">", true)
diff --git a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
index c079096b39c..e66661da02c 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -597,11 +597,47 @@ describe('compiler: element transform', () => {
 
   test('props + children', () => {
     const { code, ir } = compileWithElementTransform(
-      `<div id="foo"><span/><main><b/><div><div><span/><span/></div></div></main></div>`,
+      `<div id="foo"><span><b/></span><main><b/><div><div><span/><span/></div></div></main></div>`,
     )
 
     const template =
-      '<div id="foo"><span></span><main><b></b><div><div><span></span><span>'
+      '<div id="foo"><span><b></b></span><main><b></b><div><div><span></span><span>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('span in nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><span/></div><div/></div>`,
+    )
+
+    const template = '<div><div><span></div><div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('b in nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><b/></div><div/></div>`,
+    )
+
+    const template = '<div><div><b></b></div><div>'
+    expect(code).toMatchSnapshot()
+    expect(code).contains(JSON.stringify(template))
+    expect(ir.template).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('pure nested divs', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div><div><div/></div><div/></div>`,
+    )
+
+    const template = '<div><div><div></div></div><div>'
     expect(code).toMatchSnapshot()
     expect(code).contains(JSON.stringify(template))
     expect(ir.template).toMatchObject([template])
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 88b99b26a36..acc9edc4769 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -17,6 +17,7 @@ import {
   capitalize,
   extend,
   isBuiltInDirective,
+  isFormattingTag,
   isVoidTag,
   makeMap,
 } from '@vue/shared'
@@ -67,12 +68,18 @@ export const transformElement: NodeTransform = (node, context) => {
       getEffectIndex,
     )
 
-    let { index, parent } = context
-    const isLastChild =
-      parent &&
-      parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
-        .length ===
-        index + 1
+    let { index, parent, block } = context
+    let isLastChild = true
+    const checkIsLastChild = () => {
+      isLastChild &&=
+        !!parent &&
+        (block !== parent.block ||
+          parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
+            .length ===
+            index + 1)
+    }
+
+    checkIsLastChild()
     while (
       parent &&
       parent.parent &&
@@ -86,6 +93,29 @@ export const transformElement: NodeTransform = (node, context) => {
       parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
         .length === 1
 
+    // If it is a formatting tag, close tag is absolutely required if it's not on the right-most path of the tree
+    // => https://html.spec.whatwg.org/multipage/parsing.html#reconstruct-the-active-formatting-elements
+    // If the parent has the same tag, then close tag is required if it's not on the right-most path of the tree
+    // => The parent's close tag will close the child otherwise; disambiguation is needed
+    if (
+      isFormattingTag(node.tag) ||
+      (parent &&
+        parent.node.type === NodeTypes.ELEMENT &&
+        node.tag === parent.node.tag)
+    ) {
+      while (
+        isLastChild &&
+        parent &&
+        parent.parent &&
+        block === parent.parent.block &&
+        parent.node.type === NodeTypes.ELEMENT
+      ) {
+        index = parent.index
+        parent = parent.parent
+        checkIsLastChild()
+      }
+    }
+
     if (isComponent) {
       transformComponentElement(
         node as ComponentNode,
diff --git a/packages/shared/src/domTagConfig.ts b/packages/shared/src/domTagConfig.ts
index 7f9d198e569..d36eae915aa 100644
--- a/packages/shared/src/domTagConfig.ts
+++ b/packages/shared/src/domTagConfig.ts
@@ -38,6 +38,9 @@ const MATH_TAGS =
 const VOID_TAGS =
   'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
 
+// https://html.spec.whatwg.org/multipage/parsing.html#formatting
+const FORMATTING_TAGS = 'a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,u'
+
 /**
  * Compiler only.
  * Do NOT use in runtime code paths unless behind `__DEV__` flag.
@@ -62,3 +65,9 @@ export const isMathMLTag: (key: string) => boolean =
  */
 export const isVoidTag: (key: string) => boolean =
   /*@__PURE__*/ makeMap(VOID_TAGS)
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `__DEV__` flag.
+ */
+export const isFormattingTag: (key: string) => boolean =
+  /*@__PURE__*/ makeMap(FORMATTING_TAGS)

From fb678dd4ecfabebdcad4b6424f2e2fdbbbb9b528 Mon Sep 17 00:00:00 2001
From: Cynthia <cynthia@cynthia.dev>
Date: Sat, 26 Jul 2025 10:52:31 +0200
Subject: [PATCH 4/4] test(runtime-vapor): add tests for template parsing
 behavior

---
 .../__tests__/dom/template.spec.ts             | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/runtime-vapor/__tests__/dom/template.spec.ts b/packages/runtime-vapor/__tests__/dom/template.spec.ts
index 85de30987a5..5f30134eb8f 100644
--- a/packages/runtime-vapor/__tests__/dom/template.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/template.spec.ts
@@ -40,4 +40,22 @@ describe('api: template', () => {
     expect(nthChild(root, 2)).toBe(root.childNodes[2])
     expect(next(b)).toBe(root.childNodes[2])
   })
+
+  describe('tag closure omission', () => {
+    test('final close tags', () => {
+      const t = template('<div><span>')
+      const root = t() as HTMLElement
+      const html = root.outerHTML
+
+      expect(html).toBe('<div><span></span></div>')
+    })
+
+    test('wrapped non-formatting tag closure', () => {
+      const t = template('<div><div><span></div><div>')
+      const root = t() as HTMLElement
+      const html = root.outerHTML
+
+      expect(html).toBe('<div><div><span></span></div><div></div></div>')
+    })
+  })
 })