diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index a5d422aed2a..9d05beab737 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 { txt as _txt, 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, withVaporCtx as _withVaporCtx, 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 { txt as _txt, createInvoker as _createInvoker, 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 { txt as _txt, 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,8 +214,8 @@ export function render(_ctx) {
 
 exports[`compile > execution order > 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")
@@ -238,7 +238,7 @@ export function render(_ctx) {
 
 exports[`compile > execution order > with insertionState 1`] = `
 "import { resolveComponent as _resolveComponent, child as _child, setInsertionState as _setInsertionState, createSlot as _createSlot, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
 
 export function render(_ctx) {
   const _component_Comp = _resolveComponent("Comp")
@@ -254,7 +254,7 @@ export function render(_ctx) {
 
 exports[`compile > execution order > with v-once 1`] = `
 "import { child as _child, next as _next, nthChild as _nthChild, txt as _txt, 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()
@@ -292,7 +292,7 @@ exports[`compile > expression parsing > v-bind 1`] = `
 
 exports[`compile > expression parsing > v-for 1`] = `
 "import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.a.b), (_for_item0, _for_key0, _for_index0) => {
@@ -305,7 +305,7 @@ export function render(_ctx) {
 
 exports[`compile > expression parsing > v-on multi statements 1`] = `
 "import { createInvoker as _createInvoker, 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) {
@@ -334,9 +334,9 @@ export function render(_ctx) {
 
 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()
@@ -348,7 +348,7 @@ export function render(_ctx) {
 
 exports[`compile > gen unique helper alias > should avoid conflicts with existing variable names 1`] = `
 "import { txt as _txt2, 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()
@@ -360,7 +360,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > gen unique node variables > should avoid binding conflicts for node vars (n*/x*) 1`] = `
 "import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = t0()
@@ -378,7 +378,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > gen unique node variables > should bump old ref var (r*) on conflict 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -400,7 +400,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > gen unique node variables > should bump placeholder var (p*) on conflict 1`] = `
 "import { child as _child, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div><div><span></span></div></div></div>", true)
+const t0 = _template("<div><div><div><span>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = t0()
@@ -414,9 +414,9 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > gen unique node variables > should bump template var (t*) on conflict 1`] = `
 "import { template as _template } from 'vue';
-const t1 = _template("<div></div>")
-const t3 = _template("<span></span>")
-const t4 = _template("<p></p>")
+const t1 = _template("<div>")
+const t3 = _template("<span>")
+const t4 = _template("<p>")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t1()
@@ -439,7 +439,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__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/scopeId.spec.ts.snap
index 3d0322ce519..2e4ff6572b7 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`scopeId compiler support > should wrap default slot 1`] = `
 "import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const _component_Child = _resolveComponent("Child")
@@ -18,7 +18,7 @@ export function render(_ctx) {
 
 exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
 "import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div test></div>")
+const t0 = _template("<div test>")
 
 export function render(_ctx) {
   const _component_Child = _resolveComponent("Child")
@@ -49,7 +49,7 @@ export function render(_ctx) {
 exports[`scopeId compiler support > should wrap named slots 1`] = `
 "import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
 const t0 = _template(" ")
-const t1 = _template("<div test></div>")
+const t1 = _template("<div test>")
 
 export function render(_ctx) {
   const _component_Child = _resolveComponent("Child")
diff --git a/packages/compiler-vapor/__tests__/compile.spec.ts b/packages/compiler-vapor/__tests__/compile.spec.ts
index bec1bfc696a..6af36a7875c 100644
--- a/packages/compiler-vapor/__tests__/compile.spec.ts
+++ b/packages/compiler-vapor/__tests__/compile.spec.ts
@@ -67,7 +67,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')
       })
@@ -353,9 +353,9 @@ describe('compile', () => {
       expect(code).matchSnapshot()
       expect(code).not.contains('const t0 =')
       expect(code).not.contains('const t2 =')
-      expect(code).contains('const t1 = _template("<div></div>")')
-      expect(code).contains('const t3 = _template("<span></span>")')
-      expect(code).contains('const t4 = _template("<p></p>")')
+      expect(code).contains('const t1 = _template("<div>")')
+      expect(code).contains('const t3 = _template("<span>")')
+      expect(code).contains('const t4 = _template("<p>")')
     })
 
     test('should bump placeholder var (p*) on conflict', () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
index 9a1a369c294..6758edebfef 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: transition > basic 1`] = `
 "import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
@@ -18,7 +18,7 @@ export function render(_ctx) {
 
 exports[`compiler: transition > inject persisted when child has v-show 1`] = `
 "import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
@@ -34,9 +34,9 @@ export function render(_ctx) {
 
 exports[`compiler: transition > the v-if/else-if/else branches in Transition should ignore comments 1`] = `
 "import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<div>hey</div>")
-const t1 = _template("<p></p>")
-const t2 = _template("<div></div>")
+const t0 = _template("<div>hey")
+const t1 = _template("<p>")
+const t2 = _template("<div>")
 
 export function render(_ctx) {
   const n16 = _createComponent(_VaporTransition, null, {
@@ -71,7 +71,7 @@ export function render(_ctx) {
 
 exports[`compiler: transition > v-show + appear 1`] = `
 "import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
 
 export function render(_ctx) {
   const deferredApplyVShows = []
@@ -92,7 +92,7 @@ export function render(_ctx) {
 
 exports[`compiler: transition > work with dynamic keyed children 1`] = `
 "import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
 
 export function render(_ctx) {
   const n1 = _createComponent(_VaporTransition, null, {
@@ -110,7 +110,7 @@ export function render(_ctx) {
 
 exports[`compiler: transition > work with v-if 1`] = `
 "import { VaporTransition as _VaporTransition, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
 
 export function render(_ctx) {
   const n3 = _createComponent(_VaporTransition, null, {
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 9dc329f2120..c85a5d0fed8 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, txt as _txt, 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, txt as _txt, 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__/templateTransformAssetUrl.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformAssetUrl.spec.ts.snap
index 38b325e178d..b48877ebf7a 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformAssetUrl.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformAssetUrl.spec.ts.snap
@@ -43,7 +43,7 @@ export function render(_ctx) {
 exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
 "import { template as _template } from 'vue';
 import _imports_0 from '@svg/file.svg';
-const t0 = _template("<use href=\\"" + _imports_0 + '#fragment' + "\\"></use>", false, 1)
+const t0 = _template("<use href=\\"" + _imports_0 + '#fragment' + "\\">", false, 1)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -54,7 +54,7 @@ export function render(_ctx) {
 
 exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<use href=\\"\\"></use>", true, 1)
+const t0 = _template("<use href=\\"\\">", true, 1)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -90,7 +90,7 @@ exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
 "import { template as _template } from 'vue';
 import _imports_0 from './bar.png';
 import _imports_1 from '/bar.png';
-const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\"></div>", true)
+const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformSrcset.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformSrcset.spec.ts.snap
index 68ed7686e2e..f6dc18a73cc 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformSrcset.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/templateTransformSrcset.spec.ts.snap
@@ -117,7 +117,7 @@ exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
 "import { template as _template } from 'vue';
 import _imports_0 from './logo.png';
 import _imports_1 from '/logo.png';
-const t0 = _template("<div><img src=\\"" + _imports_0 + "\\" srcset><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"></div>", true)
+const t0 = _template("<div><img src=\\"" + _imports_0 + "\\" srcset><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", true)
 
 export function render(_ctx) {
   const n0 = 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 c75f67c36df..3b0d1ef5bdd 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, txt as _txt, 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, txt as _txt, 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, txt as _txt, 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__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 53d9c556133..dd456899922 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -2,7 +2,17 @@
 
 exports[`compiler: element transform > MathML 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<math><mrow><mi>x</mi></mrow></math>", true, 2)
+const t0 = _template("<math><mrow><mi>x", true, 2)
+
+export function render(_ctx) {
+  const n0 = t0()
+  return n0
+}"
+`;
+
+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()
@@ -439,9 +449,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()
@@ -454,9 +464,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><b></b></span><main><b></b><div><div><span></span><span>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -466,7 +497,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()
@@ -477,7 +508,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props merging: event handlers 1`] = `
 "import { createInvoker as _createInvoker, 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) {
@@ -490,7 +521,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()
@@ -499,9 +530,29 @@ 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\\"></div>", true)
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -511,7 +562,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > svg 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<svg><circle r=\\"40\\"></circle></svg>", true, 1)
+const t0 = _template("<svg><circle r=\\"40\\">", true, 1)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -521,7 +572,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()
@@ -532,7 +583,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()
@@ -543,7 +594,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()
@@ -554,7 +605,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()
@@ -565,7 +616,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/__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 e55d3299b81..44227729080 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 73420681511..392c8f473e7 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>")
+const t0 = _template("<div>")
 
 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__/transformText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
index 8dc459666a4..90784da4efd 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
@@ -13,7 +13,7 @@ export function render(_ctx) {
 
 exports[`compiler: text transform > constant text 1`] = `
 "import { child as _child, template as _template } from 'vue';
-const t0 = _template("<div>2 foo1 1 1 1</div>", true)
+const t0 = _template("<div>2 foo1 1 1 1", true)
 
 export function render(_ctx) {
   const n1 = t0()
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 316cf92243c..bc8560f124f 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 > TSNonNullExpression 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()
@@ -16,7 +16,7 @@ export function render(_ctx) {
 
 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()
@@ -31,7 +31,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()
@@ -45,7 +45,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()
@@ -59,7 +59,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > dynamic property access with parentheses 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()
@@ -74,7 +74,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()
@@ -94,7 +94,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()
@@ -105,7 +105,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()
@@ -116,7 +116,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()
@@ -127,7 +127,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()
@@ -144,7 +144,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()
@@ -159,7 +159,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()
@@ -173,7 +173,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()
@@ -192,7 +192,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()
@@ -208,7 +208,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()
@@ -224,7 +224,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()
@@ -240,7 +240,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > shared member root 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()
@@ -256,7 +256,7 @@ export function render(_ctx) {
 
 exports[`cache multiple access > shared member root with TSNonNullExpression 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()
@@ -272,7 +272,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()
@@ -286,7 +286,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()
@@ -297,7 +297,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()
@@ -308,7 +308,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()
@@ -319,7 +319,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()
@@ -330,7 +330,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()
@@ -341,7 +341,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()
@@ -352,7 +352,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()
@@ -363,7 +363,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .camel modifier w/ dynamic arg + prefixIdentifiers 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()
@@ -374,7 +374,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()
@@ -385,7 +385,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()
@@ -396,7 +396,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()
@@ -407,7 +407,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()
@@ -418,7 +418,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()
@@ -429,7 +429,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()
@@ -440,7 +440,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()
@@ -451,7 +451,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()
@@ -462,7 +462,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()
@@ -473,7 +473,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > .prop modifier w/ dynamic arg + prefixIdentifiers 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()
@@ -484,7 +484,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()
@@ -495,7 +495,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()
@@ -506,7 +506,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()
@@ -517,7 +517,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()
@@ -528,7 +528,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()
@@ -539,7 +539,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()
@@ -550,7 +550,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > :class w/ svg elements 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>", true, 1)
+const t0 = _template("<svg>", true, 1)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -561,7 +561,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()
@@ -572,7 +572,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()
@@ -594,7 +594,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()
@@ -605,12 +605,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) {
@@ -645,7 +645,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()
@@ -656,7 +656,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()
@@ -671,7 +671,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()
@@ -685,7 +685,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()
@@ -696,7 +696,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()
@@ -717,7 +717,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()
@@ -727,7 +727,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > v-bind w/ svg elements 1`] = `
 "import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>", true, 1)
+const t0 = _template("<svg>", true, 1)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -738,7 +738,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 e=\\"2\\" f=\\"foo1\\" g=\\"1\\" h=\\"1\\"></div>", true)
+const t0 = _template("<div e=\\"2\\" f=\\"foo1\\" g=\\"1\\" 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 29cacf2bff3..b3d4a21c2e2 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 { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 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 { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 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 { txt as _txt, createInvoker as _createInvoker, 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>")
+const t0 = _template("<div> ")
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -49,7 +49,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > key only binding pattern 1`] = `
 "import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>")
+const t0 = _template("<tr> ")
 
 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>")
+const t0 = _template("<div>")
 
 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, txt as _txt, 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>")
+const t0 = _template("<span> ")
+const t1 = _template("<div>")
 
 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, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 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 { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span> </span>")
+const t0 = _template("<span> ")
 
 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 { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 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 { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>")
+const t0 = _template("<tr> ")
 
 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>")
+const t0 = _template("<tr>")
 
 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>")
+const t0 = _template("<tr>")
 
 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>")
+const t0 = _template("<tr>")
 
 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, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
@@ -269,7 +269,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>")
+const t0 = _template("<div>item")
 
 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 4d65996f757..9bb578acc24 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 232aba02a64..d838c5f2f1b 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 { txt as _txt, 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, txt as _txt, 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), () => {
@@ -59,7 +59,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), () => {
@@ -76,9 +76,9 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > multiple v-if at root 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>foo</div>")
-const t1 = _template("<div>bar</div>")
-const t2 = _template("<div>baz</div>")
+const t0 = _template("<div>foo")
+const t1 = _template("<div>bar")
+const t2 = _template("<div>baz")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -98,8 +98,8 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if (multiple element) 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>")
-const t1 = _template("<div>ho</div>")
+const t0 = _template("<div>hi")
+const t1 = _template("<div>ho")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -113,7 +113,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if (single element) 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>", true)
+const t0 = _template("<div>hi", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -139,7 +139,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if (with v-for inside) 1`] = `
 "import { createFor as _createFor, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -155,9 +155,9 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if + normal v-else 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>")
-const t1 = _template("<div>ho</div>")
-const t2 = _template("<div></div>", true)
+const t0 = _template("<div>hi")
+const t1 = _template("<div>ho")
+const t2 = _template("<div>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -174,9 +174,9 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > template v-if 1`] = `
 "import { txt as _txt, 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>")
+const t2 = _template("<p> ")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -193,8 +193,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>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -210,8 +210,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>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
 const t2 = _template("fine", true)
 
 export function render(_ctx) {
@@ -234,8 +234,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>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -251,10 +251,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()
@@ -277,9 +277,9 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if and extra at root 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>foo</div>")
-const t1 = _template("<div>bar</div>")
-const t2 = _template("<div>baz</div>")
+const t0 = _template("<div>foo")
+const t1 = _template("<div>bar")
+const t2 = _template("<div>baz")
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.foo), () => {
@@ -296,7 +296,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-if with v-once 1`] = `
 "import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, 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), () => {
@@ -311,7 +311,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-if > v-on with v-if 1`] = `
 "import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<button>w/ v-if</button>", true)
+const t0 = _template("<button>w/ v-if", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (true), () => {
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 4d6b9d5b406..23ee5ed3cb2 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -199,7 +199,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()
@@ -221,7 +221,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 ec68982edfc..3fb67043ab1 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 { createInvoker as _createInvoker, 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 eb0abd04676..2ef4a614adf 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 > on slot outlet 1`] = `
 "import { setInsertionState as _setInsertionState, createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
@@ -74,7 +74,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>")
+const t0 = _template("<div>")
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
@@ -87,7 +87,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), () => {
@@ -100,8 +100,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>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
 
 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 9b66bb6c869..9f94a09ec99 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
@@ -191,7 +191,7 @@ export function render(_ctx) {
 
 exports[`compiler: transform slot > implicit default slot 1`] = `
 "import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, 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")
@@ -209,7 +209,7 @@ exports[`compiler: transform slot > named slots w/ implicit default slot 1`] = `
 "import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, 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")
@@ -341,7 +341,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")
@@ -365,7 +365,7 @@ exports[`compiler: transform slot > with whitespace: 'preserve' > implicit defau
 "import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, 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 1cf9aed7255..ba181299e8f 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 { txt as _txt, 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 { txt as _txt, 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/transformElement.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
index c143fea02a2..fd672ec21b2 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts
@@ -572,7 +572,7 @@ 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.keys()]).toMatchObject([template])
@@ -588,12 +588,73 @@ describe('compiler: element transform', () => {
     expect(code).toMatchSnapshot()
   })
 
-  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.keys()]).toMatchObject([template])
+    expect(ir.block.effect).lengthOf(0)
+  })
+
+  test('props + children', () => {
+    const { code, ir } = compileWithElementTransform(
+      `<div id="foo"><span><b/></span><main><b/><div><div><span/><span/></div></div></main></div>`,
+    )
+
+    const template =
+      '<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.keys()]).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.keys()]).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.keys()]).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.keys()]).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.keys()]).toMatchObject([template])
@@ -1010,11 +1071,7 @@ describe('compiler: element transform', () => {
       <form><form/></form>`,
     )
     expect(code).toMatchSnapshot()
-    expect([...ir.template.keys()]).toEqual([
-      '<div>123</div>',
-      '<p></p>',
-      '<form></form>',
-    ])
+    expect([...ir.template.keys()]).toEqual(['<div>123', '<p>', '<form>'])
     expect(ir.block.dynamic).toMatchObject({
       children: [
         { id: 1, template: 1, children: [{ id: 0, template: 0 }] },
@@ -1049,21 +1106,17 @@ describe('compiler: element transform', () => {
     const t = `<svg><circle r="40"></circle></svg>`
     const { code, ir } = compileWithElementTransform(t)
     expect(code).toMatchSnapshot()
-    expect(code).contains(
-      '_template("<svg><circle r=\\"40\\"></circle></svg>", true, 1)',
-    )
-    expect([...ir.template.keys()]).toMatchObject([t])
-    expect(ir.template.get(t)).toBe(1)
+    expect(code).contains('_template("<svg><circle r=\\"40\\">", true, 1)')
+    expect([...ir.template.keys()]).toMatchObject(['<svg><circle r="40">'])
+    expect(ir.template.get('<svg><circle r="40">')).toBe(1)
   })
 
   test('MathML', () => {
     const t = `<math><mrow><mi>x</mi></mrow></math>`
     const { code, ir } = compileWithElementTransform(t)
     expect(code).toMatchSnapshot()
-    expect(code).contains(
-      '_template("<math><mrow><mi>x</mi></mrow></math>", true, 2)',
-    )
-    expect([...ir.template.keys()]).toMatchObject([t])
-    expect(ir.template.get(t)).toBe(2)
+    expect(code).contains('_template("<math><mrow><mi>x", true, 2)')
+    expect([...ir.template.keys()]).toMatchObject(['<math><mrow><mi>x'])
+    expect(ir.template.get('<math><mrow><mi>x')).toBe(2)
   })
 })
diff --git a/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformSlotOutlet.spec.ts
index ffd0a6da628..3aab3660791 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.keys()][0]).toBe('<div></div>')
+    expect([...ir.template.keys()][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.keys()][0]).toBe('<div></div>')
+    expect([...ir.template.keys()][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.keys()][0]).toBe('<div></div>')
+    expect([...ir.template.keys()][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.keys()][0]).toBe('<div></div>')
+    expect([...ir.template.keys()][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 a0ffe4fc4e3..1a1c9aba353 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.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).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.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).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.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).toEqual(['<div>'])
     expect(ir.block.operation).toMatchObject([
       {
         type: IRNodeTypes.DECLARE_OLD_REF,
diff --git a/packages/compiler-vapor/__tests__/transforms/transformText.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformText.spec.ts
index efa848f4718..8af9415e36f 100644
--- a/packages/compiler-vapor/__tests__/transforms/transformText.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/transformText.spec.ts
@@ -50,8 +50,8 @@ describe('compiler: text transform', () => {
 
   it('escapes raw static text when generating the template string', () => {
     const { ir } = compileWithTextTransform('<code>&lt;script&gt;</code>')
-    expect([...ir.template.keys()]).toContain('<code>&lt;script&gt;</code>')
-    expect([...ir.template.keys()]).not.toContain('<code><script></code>')
+    expect([...ir.template.keys()]).toContain('<code>&lt;script&gt;')
+    expect([...ir.template.keys()]).not.toContain('<code><script>')
   })
 
   test('constant text', () => {
@@ -65,7 +65,7 @@ describe('compiler: text transform', () => {
           {{ '1' }}
         </div>`,
     )
-    expect(code).includes(`_template("<div>2 foo1 1 1 1</div>", true)`)
+    expect(code).includes(`_template("<div>2 foo1 1 1 1", true)`)
     expect(code).toMatchSnapshot()
   })
 })
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
index ddbc125cd57..96102099164 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.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).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.keys()]).toEqual(['<div arg></div>'])
+    expect([...ir.template.keys()]).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 d57dfe90b8d..2275500b208 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.keys()]).toEqual(['<div> </div>'])
+    expect([...ir.template.keys()]).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.keys()]).toEqual(['<span> </span>', '<div></div>'])
+    expect([...ir.template.keys()]).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 d507f7ea0f3..642def2b042 100644
--- a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -78,7 +78,7 @@ describe('v-html', () => {
     expect(helpers).contains('setHtml')
 
     // children should have been removed
-    expect([...ir.template.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).toEqual(['<div>'])
 
     expect(ir.block.operation).toMatchObject([])
     expect(ir.block.effect).toMatchObject([
@@ -110,7 +110,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 482794356ed..b5e8786fe65 100644
--- a/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
@@ -34,7 +34,7 @@ describe('compiler: v-if', () => {
 
     expect(helpers).contains('createIf')
 
-    expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+    expect([...ir.template.keys()]).toEqual(['<div> '])
 
     const op = ir.block.dynamic.children[0].operation
     expect(op).toMatchObject({
@@ -70,13 +70,13 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).contains(`_template("<div>foo</div>")`)
-    expect(code).contains(`_template("<div>bar</div>")`)
-    expect(code).contains(`_template("<div>baz</div>")`)
+    expect(code).contains(`_template("<div>foo")`)
+    expect(code).contains(`_template("<div>bar")`)
+    expect(code).contains(`_template("<div>baz")`)
     expect([...ir.template.keys()]).toMatchObject([
-      '<div>foo</div>',
-      '<div>bar</div>',
-      '<div>baz</div>',
+      '<div>foo',
+      '<div>bar',
+      '<div>baz',
     ])
   })
 
@@ -86,13 +86,13 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).contains(`_template("<div>foo</div>")`)
-    expect(code).contains(`_template("<div>bar</div>")`)
-    expect(code).contains(`_template("<div>baz</div>")`)
+    expect(code).contains(`_template("<div>foo")`)
+    expect(code).contains(`_template("<div>bar")`)
+    expect(code).contains(`_template("<div>baz")`)
     expect([...ir.template.keys()]).toMatchObject([
-      '<div>foo</div>',
-      '<div>bar</div>',
-      '<div>baz</div>',
+      '<div>foo',
+      '<div>bar',
+      '<div>baz',
     ])
   })
 
@@ -102,11 +102,7 @@ describe('compiler: v-if', () => {
     )
     expect(code).matchSnapshot()
 
-    expect([...ir.template.keys()]).toEqual([
-      '<div></div>',
-      'hello',
-      '<p> </p>',
-    ])
+    expect([...ir.template.keys()]).toEqual(['<div>', 'hello', '<p> '])
     expect(ir.block.effect).toEqual([])
     const op = ir.block.dynamic.children[0].operation as IfIRNode
     expect(op.positive.effect).toMatchObject([
@@ -151,8 +147,8 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).toContain('_template("<div>hi</div>", true)')
-    expect([...ir.template.keys()]).toMatchObject(['<div>hi</div>'])
+    expect(code).toContain('_template("<div>hi", true)')
+    expect([...ir.template.keys()]).toMatchObject(['<div>hi'])
   })
 
   test('template v-if (multiple element)', () => {
@@ -161,12 +157,9 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).toContain('_template("<div>hi</div>")')
-    expect(code).toContain('_template("<div>ho</div>")')
-    expect([...ir.template.keys()]).toMatchObject([
-      '<div>hi</div>',
-      '<div>ho</div>',
-    ])
+    expect(code).toContain('_template("<div>hi")')
+    expect(code).toContain('_template("<div>ho")')
+    expect([...ir.template.keys()]).toMatchObject(['<div>hi', '<div>ho'])
   })
 
   test('template v-if (with v-for inside)', () => {
@@ -175,8 +168,8 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).toContain('_template("<div></div>")')
-    expect([...ir.template.keys()]).toMatchObject(['<div></div>'])
+    expect(code).toContain('_template("<div>")')
+    expect([...ir.template.keys()]).toMatchObject(['<div>'])
   })
 
   test('template v-if + normal v-else', () => {
@@ -185,13 +178,13 @@ describe('compiler: v-if', () => {
     )
 
     expect(code).toMatchSnapshot()
-    expect(code).toContain('_template("<div>hi</div>")')
-    expect(code).toContain('_template("<div>ho</div>")')
-    expect(code).toContain('_template("<div></div>", true)')
+    expect(code).toContain('_template("<div>hi")')
+    expect(code).toContain('_template("<div>ho")')
+    expect(code).toContain('_template("<div>", true)')
     expect([...ir.template.keys()]).toMatchObject([
-      '<div>hi</div>',
-      '<div>ho</div>',
-      '<div></div>',
+      '<div>hi',
+      '<div>ho',
+      '<div>',
     ])
   })
 
@@ -200,7 +193,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok">hello</div><div v-if="ok">hello</div>`,
     )
     expect(code).matchSnapshot()
-    expect([...ir.template.keys()]).toEqual(['<div>hello</div>'])
+    expect([...ir.template.keys()]).toEqual(['<div>hello'])
     expect(ir.block.returns).toEqual([0, 3])
   })
 
@@ -210,7 +203,7 @@ describe('compiler: v-if', () => {
     )
     expect(code).matchSnapshot()
     expect(helpers).contains('createIf')
-    expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+    expect([...ir.template.keys()]).toEqual(['<div> '])
   })
 
   test('component v-if', () => {
@@ -243,7 +236,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.keys()]).toEqual(['<div></div>', '<p></p>'])
+    expect([...ir.template.keys()]).toEqual(['<div>', '<p>'])
 
     expect(helpers).contains('createIf')
     expect(ir.block.effect).lengthOf(0)
@@ -276,7 +269,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/>`,
     )
     expect(code).matchSnapshot()
-    expect([...ir.template.keys()]).toEqual(['<div></div>', '<p></p>'])
+    expect([...ir.template.keys()]).toEqual(['<div>', '<p>'])
 
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
       type: IRNodeTypes.IF,
@@ -315,7 +308,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/><p v-else-if="false"/><template v-else>fine</template>`,
     )
     expect(code).matchSnapshot()
-    expect([...ir.template.keys()]).toEqual(['<div></div>', '<p></p>', 'fine'])
+    expect([...ir.template.keys()]).toEqual(['<div>', '<p>', 'fine'])
 
     expect(ir.block.returns).toEqual([0])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
@@ -370,13 +363,13 @@ describe('compiler: v-if', () => {
     `)
     expect(code).matchSnapshot()
     expect([...ir.template.keys()]).toEqual([
-      '<div></div>',
+      '<div>',
       '<!--foo-->',
-      '<p></p>',
+      '<p>',
       '<!--bar-->',
       'fine',
 
-      '<div> </div>',
+      '<div> ',
     ])
   })
 
@@ -385,7 +378,7 @@ describe('compiler: v-if', () => {
       `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`,
     )
     expect(code).toMatchSnapshot()
-    expect([...ir.template.keys()]).toEqual(['<button>w/ v-if</button>'])
+    expect([...ir.template.keys()]).toEqual(['<button>w/ v-if'])
 
     expect(ir.block.returns).toEqual([0])
     expect(ir.block.dynamic.children[0].operation).toMatchObject({
diff --git a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts
index 64d1b4ac4a4..a840912b167 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.keys()]).toEqual(['<div></div>'])
+    expect([...ir.template.keys()]).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.keys()]).toEqual(['foo', 'bar', '<span></span>'])
+    expect([...ir.template.keys()]).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 e1f5684b825..5b5773d897a 100644
--- a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
@@ -80,7 +80,7 @@ describe('v-text', () => {
     ])
 
     // children should have been removed
-    expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+    expect([...ir.template.keys()]).toEqual(['<div> '])
 
     expect(ir.block.effect).toMatchObject([
       {
@@ -109,7 +109,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', () => {
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index dc9c7e0aae0..0fe49eed799 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -21,6 +21,7 @@ import {
   capitalize,
   extend,
   isBuiltInDirective,
+  isFormattingTag,
   isVoidTag,
   makeMap,
 } from '@vue/shared'
@@ -77,7 +78,57 @@ export const transformElement: NodeTransform = (node, context) => {
       getEffectIndex,
     )
 
+    let { index, parent, block } = context
+    let isLastChild = true
+    const checkIsLastChild = () => {
+      // If all children after the element are components, then we can consider it "last"
+      // Components won't appear in the html template, so there's no need for closing tags
+      isLastChild &&=
+        !!parent &&
+        (block !== parent.block ||
+          parent.node.children.every(
+            (c, i) =>
+              i <= index ||
+              (c.type === NodeTypes.ELEMENT &&
+                c.tagType === ElementTypes.COMPONENT),
+          ))
+    }
+
+    checkIsLastChild()
     const singleRoot = isSingleRoot(context)
+
+    // 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()
+      }
+    }
+
+    while (
+      parent &&
+      parent.parent &&
+      parent.node.type === NodeTypes.ELEMENT &&
+      parent.node.tagType === ElementTypes.TEMPLATE
+    ) {
+      parent = parent.parent
+    }
+
     if (isComponent) {
       transformComponentElement(
         node as ComponentNode,
@@ -92,6 +143,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,
       )
@@ -234,6 +287,7 @@ function transformNativeElement(
   node: PlainElementNode,
   propsResult: PropsResult,
   singleRoot: boolean,
+  isLastChild: boolean,
   context: TransformContext,
   getEffectIndex: () => number,
 ) {
@@ -296,8 +350,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}>`
   }
 
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)