From: Evan You <evan@vuejs.org>
Date: Fri, 13 Dec 2024 12:23:20 +0000 (+0800)
Subject: wip(vapor): further tweak single root attr fallthrough behavior
X-Git-Tag: v3.6.0-alpha.1~16^2~149
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=c07734debf3096273a20d520f7f04ae626083988;p=thirdparty%2Fvuejs%2Fcore.git

wip(vapor): further tweak single root attr fallthrough behavior
---

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 817c40ccbe..fad91a7952 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 { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></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[`compile > custom directive > basic 1`] = `
 "import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const _directive_test = _resolveDirective("test")
@@ -52,7 +52,7 @@ export function render(_ctx) {
 
 exports[`compile > directives > custom directive > basic 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -63,7 +63,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > binding value 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -74,7 +74,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > dynamic parameters 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -85,7 +85,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > modifiers 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -96,7 +96,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -107,7 +107,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > static parameters 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -118,7 +118,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`compile > directives > custom directive > static parameters and modifiers 1`] = `
 "import { withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -129,7 +129,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>")
+const t0 = _template("<div>test</div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -139,7 +139,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>")
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>", true)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
@@ -175,7 +175,7 @@ export function render(_ctx) {
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
 "import { delegate as _delegate, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<button></button>")
+const t0 = _template("<button></button>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -229,7 +229,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>")
+const t0 = _template("<div><p>hello</p><input><span></span></div>", 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 abcccf62f4..c20cba78bf 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`compiler: children transform > children & sibling references 1`] = `
 "import { next as _next, createTextNode as _createTextNode, insert as _insert, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><p></p> <!><p></p></div>")
+const t0 = _template("<div><p></p> <!><p></p></div>", true)
 
 export function render(_ctx) {
   const n4 = 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 77aa794d60..e5ef371072 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -284,7 +284,7 @@ export function render(_ctx) {
 
 exports[`compiler: element transform > props + children 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span></div>")
+const t0 = _template("<div id=\\"foo\\"><span></span></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -293,19 +293,19 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: element transform > props merging: class 1`] = `
-"import { setClassIncremental as _setClassIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setClassIncremental(n0, ["foo", { bar: _ctx.isBar }]))
+  _renderEffect(() => _setClass(n0, ["foo", { bar: _ctx.isBar }]))
   return n0
 }"
 `;
 
 exports[`compiler: element transform > props merging: event handlers 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -321,19 +321,19 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: element transform > props merging: style 1`] = `
-"import { setStyleIncremental as _setStyleIncremental, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setStyleIncremental(n0, ["color: green", { color: 'red' }]))
+  _renderEffect(() => _setStyle(n0, ["color: green", { color: 'red' }]))
   return n0
 }"
 `;
 
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -343,7 +343,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -354,7 +354,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -365,7 +365,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -376,7 +376,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -387,7 +387,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>")
+const t0 = _template("<div></div>", true)
 
 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 e7fc06fdd2..6d62b9c4e3 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>")
+const t0 = _template("<div></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>")
+const t0 = _template("<div></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>")
+const t0 = _template("<div></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>")
+const t0 = _template("<div></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 115c274039..da863b2407 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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -15,7 +15,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></div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -30,7 +30,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
@@ -45,7 +45,7 @@ export function render(_ctx) {
 
 exports[`compiler: template ref transform > static ref 1`] = `
 "import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index b195073f8b..30d5249fd7 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[`compiler v-bind > .attr modifier 1`] = `
 "import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -13,7 +13,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -24,7 +24,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -35,7 +35,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>")
+const t0 = _template("<progress></progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -46,7 +46,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -57,7 +57,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -68,7 +68,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -79,7 +79,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -90,7 +90,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -101,7 +101,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -112,7 +112,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -123,7 +123,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -134,7 +134,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>")
+const t0 = _template("<progress></progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -145,7 +145,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -156,7 +156,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -167,7 +167,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -178,7 +178,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -189,7 +189,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -200,7 +200,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -211,7 +211,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>")
+const t0 = _template("<progress></progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -222,7 +222,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -233,7 +233,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -244,7 +244,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -255,7 +255,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -266,7 +266,7 @@ export function render(_ctx) {
 
 exports[`compiler v-bind > :value 1`] = `
 "import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -277,7 +277,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>")
+const t0 = _template("<progress></progress>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -328,7 +328,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -339,7 +339,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -350,7 +350,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -361,7 +361,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -372,7 +372,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -393,7 +393,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>")
+const t0 = _template("<div arg></div>", true)
 
 export function render(_ctx) {
   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 4c486e3f60..4edbec43f0 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 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
@@ -16,7 +16,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > basic v-for 1`] = `
 "import { delegate as _delegate, 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></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -32,7 +32,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > function params w/ prefixIdentifiers: false 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (items), ([item, __, k]) => {
@@ -46,7 +46,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></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
@@ -64,7 +64,7 @@ export function render(_ctx) {
 exports[`compiler: v-for > nested v-for 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, createFor as _createFor, insert as _insert, template as _template } from 'vue';
 const t0 = _template("<span></span>")
-const t1 = _template("<div></div>")
+const t1 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
@@ -83,7 +83,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > object de-structured value 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
@@ -97,7 +97,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, withDestructure as _withDestructure, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
@@ -111,7 +111,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</div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
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 93eb311843..ecf886d7cb 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>")
+const t0 = _template("<div></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>")
+const t0 = _template("<div></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>")
+const t0 = _template("<div></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 ccd290a5c9..a01ec4774d 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 { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
@@ -63,7 +63,7 @@ exports[`compiler: v-if > template v-if 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
 const t0 = _template("<div></div>")
 const t1 = _template("hello")
-const t2 = _template("<p></p>")
+const t2 = _template("<p></p>", true)
 
 export function render(_ctx) {
   const n0 = _createIf(() => (_ctx.ok), () => {
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 4e53ecc0e6..d8afc8d4d7 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -83,7 +83,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > modifiers > .lazy 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -95,7 +95,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > modifiers > .number 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -107,7 +107,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > modifiers > .trim 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -119,7 +119,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (checkbox) 1`] = `
 "import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"checkbox\\">")
+const t0 = _template("<input type=\\"checkbox\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -131,7 +131,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (dynamic type) 1`] = `
 "import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -143,7 +143,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (radio) 1`] = `
 "import { vModelRadio as _vModelRadio, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"radio\\">")
+const t0 = _template("<input type=\\"radio\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -155,7 +155,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support input (text) 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input type=\\"text\\">")
+const t0 = _template("<input type=\\"text\\">", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -200,7 +200,7 @@ exports[`compiler: vModel transform > should support member expression w/ inline
 
 exports[`compiler: vModel transform > should support select 1`] = `
 "import { vModelSelect as _vModelSelect, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<select></select>")
+const t0 = _template("<select></select>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -212,7 +212,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support simple expression 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -224,7 +224,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support textarea 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<textarea></textarea>")
+const t0 = _template("<textarea></textarea>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -236,7 +236,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support w/ dynamic v-bind 1`] = `
 "import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -249,7 +249,7 @@ export function render(_ctx) {
 
 exports[`compiler: vModel transform > should support w/ dynamic v-bind 2`] = `
 "import { vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue';
-const t0 = _template("<input>")
+const t0 = _template("<input>", 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 43510808bc..9a64452d1b 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 { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -14,7 +14,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -30,7 +30,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -46,7 +46,7 @@ export function render(_ctx) {
 
 exports[`v-on > dynamic arg with prefixing 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -165,7 +165,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 
 exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -177,7 +177,7 @@ export function render(_ctx) {
 
 exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -189,7 +189,7 @@ export function render(_ctx) {
 
 exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -201,7 +201,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -213,7 +213,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -225,7 +225,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -241,7 +241,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -253,7 +253,7 @@ export function render(_ctx) {
 
 exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -265,7 +265,7 @@ export function render(_ctx) {
 
 exports[`v-on > should delegate event 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -277,7 +277,7 @@ export function render(_ctx) {
 
 exports[`v-on > should handle multi-line statement 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -292,7 +292,7 @@ _ctx.bar()
 
 exports[`v-on > should handle multiple inline statement 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -304,7 +304,7 @@ export function render(_ctx) {
 
 exports[`v-on > should not prefix member expression 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -316,7 +316,7 @@ export function render(_ctx) {
 
 exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("keyup")
 
 export function render(_ctx) {
@@ -330,7 +330,7 @@ export function render(_ctx) {
 
 exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click", "keyup")
 
 export function render(_ctx) {
@@ -347,7 +347,7 @@ export function render(_ctx) {
 
 exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
 "import { on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -362,7 +362,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.middle 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("mouseup")
 
 export function render(_ctx) {
@@ -376,7 +376,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.middle 2`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -393,7 +393,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.right 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("contextmenu")
 
 export function render(_ctx) {
@@ -407,7 +407,7 @@ export function render(_ctx) {
 
 exports[`v-on > should transform click.right 2`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -425,7 +425,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap as function if expression is inline statement 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("click")
 
 export function render(_ctx) {
@@ -437,7 +437,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
 "import { on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -467,7 +467,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 { on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -482,7 +482,7 @@ export function render(_ctx) {
 
 exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 _delegateEvents("keyup")
 
 export function render(_ctx) {
@@ -496,7 +496,7 @@ export function render(_ctx) {
 
 exports[`v-on > simple expression 1`] = `
 "import { delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></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 3f9f3da2e0..39384169e1 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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -13,7 +13,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > basic 1`] = `
 "import { createTextNode as _createTextNode, setClass as _setClass, prepend as _prepend, template as _template } from 'vue';
-const t0 = _template("<div><span></span></div>")
+const t0 = _template("<div><span></span></div>", 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>")
+const t0 = _template("<div><div></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, createComponentWithFallback as _createComponentWithFallback, insert as _insert, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></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 { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>")
+const t0 = _template("<div><div></div></div>", true)
 
 export function render(_ctx) {
   const n1 = t0()
@@ -62,7 +62,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > with v-for 1`] = `
 "import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
@@ -75,7 +75,7 @@ export function render(_ctx) {
 
 exports[`compiler: v-once > with v-if 1`] = `
 "import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", 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 87ed1b461e..07b8d05b11 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 { vShow as _vShow, withDirectives as _withDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
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 9f115e2721..5ae5b2a741 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 textContent 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></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-text > should raise error and ignore children when v-text is present 1`] = `
 "import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
@@ -24,7 +24,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>")
+const t0 = _template("<div></div>", true)
 
 export function render(_ctx) {
   const n0 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
index a65494b556..0de0b6abca 100644
--- a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -98,7 +98,7 @@ describe('v-html', () => {
 
     expect(code).matchSnapshot()
     // children should have been removed
-    expect(code).contains('template("<div></div>")')
+    expect(code).contains('template("<div></div>", true)')
   })
 
   test('should raise error if has no expression', () => {
diff --git a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
index 2c8c8a13e4..9a45b1eec0 100644
--- a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
@@ -92,7 +92,7 @@ describe('v-text', () => {
 
     expect(code).matchSnapshot()
     // children should have been removed
-    expect(code).contains('template("<div></div>")')
+    expect(code).contains('template("<div></div>", true)')
   })
 
   test('should raise error if has no expression', () => {
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 5b8edd9ece..46390afadb 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -130,7 +130,7 @@ export function generate(
   }
 
   const delegates = genDelegates(context)
-  const templates = genTemplates(ir.template, context)
+  const templates = genTemplates(ir.template, ir.rootTemplateIndex, context)
   const imports = genHelperImports(context)
   const preamble = imports + templates + delegates
 
diff --git a/packages/compiler-vapor/src/generators/prop.ts b/packages/compiler-vapor/src/generators/prop.ts
index cbc1a37ff8..46e85836ba 100644
--- a/packages/compiler-vapor/src/generators/prop.ts
+++ b/packages/compiler-vapor/src/generators/prop.ts
@@ -38,14 +38,12 @@ const helpers = {
   setText: { name: 'setText' },
   setHtml: { name: 'setHtml' },
   setClass: { name: 'setClass' },
-  setClassIncremental: { name: 'setClassIncremental' },
   setStyle: { name: 'setStyle' },
-  setStyleIncremental: { name: 'setStyleIncremental' },
   setValue: { name: 'setValue' },
   setAttr: { name: 'setAttr', needKey: true },
   setProp: { name: 'setProp', needKey: true },
   setDOMProp: { name: 'setDOMProp', needKey: true },
-  setDynamicProps: { name: 'setDynamicProps', acceptRoot: true },
+  setDynamicProps: { name: 'setDynamicProps' },
 } as const satisfies Partial<Record<VaporHelper, HelperConfig>>
 
 // only the static key prop will reach here
@@ -57,9 +55,8 @@ export function genSetProp(
   const {
     prop: { key, values, modifier },
     tag,
-    root,
   } = oper
-  const resolvedHelper = getRuntimeHelper(tag, key.content, modifier, root)
+  const resolvedHelper = getRuntimeHelper(tag, key.content, modifier)
   const propValue = genPropValue(values, context)
   return [
     NEWLINE,
@@ -68,7 +65,6 @@ export function genSetProp(
       `n${oper.element}`,
       resolvedHelper.needKey ? genExpression(key, context) : false,
       propValue,
-      root && resolvedHelper.acceptRoot ? 'true' : undefined,
     ),
   ]
 }
@@ -157,19 +153,18 @@ function getRuntimeHelper(
   tag: string,
   key: string,
   modifier: '.' | '^' | undefined,
-  root: boolean,
 ): HelperConfig {
   const tagName = tag.toUpperCase()
   if (modifier) {
     if (modifier === '.') {
-      return getSpecialHelper(key, tagName, root) || helpers.setDOMProp
+      return getSpecialHelper(key, tagName) || helpers.setDOMProp
     } else {
       return helpers.setAttr
     }
   }
 
   // 1. special handling for value / style / class / textContent /  innerHTML
-  const helper = getSpecialHelper(key, tagName, root)
+  const helper = getSpecialHelper(key, tagName)
   if (helper) {
     return helper
   }
@@ -200,22 +195,11 @@ function getRuntimeHelper(
 function getSpecialHelper(
   keyName: string,
   tagName: string,
-  root: boolean,
 ): HelperConfig | undefined {
   // special case for 'value' property
   if (keyName === 'value' && canSetValueDirectly(tagName)) {
     return helpers.setValue
-  }
-
-  if (root) {
-    if (keyName === 'class') {
-      return helpers.setClassIncremental
-    } else if (keyName === 'style') {
-      return helpers.setStyleIncremental
-    }
-  }
-
-  if (keyName === 'class') {
+  } else if (keyName === 'class') {
     return helpers.setClass
   } else if (keyName === 'style') {
     return helpers.setStyle
diff --git a/packages/compiler-vapor/src/generators/template.ts b/packages/compiler-vapor/src/generators/template.ts
index 17ce36fa2b..936e6c8ecd 100644
--- a/packages/compiler-vapor/src/generators/template.ts
+++ b/packages/compiler-vapor/src/generators/template.ts
@@ -5,12 +5,15 @@ import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
 
 export function genTemplates(
   templates: string[],
+  rootIndex: number | undefined,
   { helper }: CodegenContext,
 ): string {
   return templates
     .map(
       (template, i) =>
-        `const t${i} = ${helper('template')}(${JSON.stringify(template)})\n`,
+        `const t${i} = ${helper('template')}(${JSON.stringify(
+          template,
+        )}${i === rootIndex ? ', true' : ''})\n`,
     )
     .join('')
 }
diff --git a/packages/compiler-vapor/src/ir/index.ts b/packages/compiler-vapor/src/ir/index.ts
index 011387f67d..de119a4cc9 100644
--- a/packages/compiler-vapor/src/ir/index.ts
+++ b/packages/compiler-vapor/src/ir/index.ts
@@ -60,6 +60,7 @@ export interface RootIRNode {
   node: RootNode
   source: string
   template: string[]
+  rootTemplateIndex?: number
   component: Set<string>
   directive: Set<string>
   block: BlockIRNode
diff --git a/packages/compiler-vapor/src/transforms/transformElement.ts b/packages/compiler-vapor/src/transforms/transformElement.ts
index 91a352e9c9..1a1242a7ee 100644
--- a/packages/compiler-vapor/src/transforms/transformElement.ts
+++ b/packages/compiler-vapor/src/transforms/transformElement.ts
@@ -220,6 +220,10 @@ function transformNativeElement(
     template += `</${tag}>`
   }
 
+  if (singleRoot) {
+    context.ir.rootTemplateIndex = context.ir.template.length
+  }
+
   if (
     context.parent &&
     context.parent.node.type === NodeTypes.ELEMENT &&
diff --git a/packages/runtime-vapor/__tests__/componentAttrs.spec.ts b/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
index 87b0721f4e..4305a27096 100644
--- a/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
@@ -1,10 +1,12 @@
-import { type Ref, nextTick, ref, watchEffect } from '@vue/runtime-dom'
+import { type Ref, nextTick, ref } from '@vue/runtime-dom'
 import {
   createComponent,
   defineVaporComponent,
   renderEffect,
-  setClassIncremental,
-  setStyleIncremental,
+  setClass,
+  setDynamicProps,
+  setProp,
+  setStyle,
   setText,
   template,
 } from '../src'
@@ -17,12 +19,12 @@ const define = makeRender<any>()
 
 describe('attribute fallthrough', () => {
   it('should allow attrs to fallthrough', async () => {
-    const t0 = template('<div>')
+    const t0 = template('<div>', true)
     const { component: Child } = define({
       props: ['foo'],
       setup(props: any) {
         const n0 = t0() as Element
-        watchEffect(() => setText(n0, props.foo))
+        renderEffect(() => setText(n0, props.foo))
         return n0
       },
     })
@@ -54,13 +56,13 @@ describe('attribute fallthrough', () => {
   })
 
   it('should not fallthrough if explicitly pass inheritAttrs: false', async () => {
-    const t0 = template('<div>')
+    const t0 = template('<div>', true)
     const { component: Child } = define({
       props: ['foo'],
       inheritAttrs: false,
       setup(props: any) {
         const n0 = t0() as Element
-        watchEffect(() => setText(n0, props.foo))
+        renderEffect(() => setText(n0, props.foo))
         return n0
       },
     })
@@ -92,12 +94,12 @@ describe('attribute fallthrough', () => {
   })
 
   it('should pass through attrs in nested single root components', async () => {
-    const t0 = template('<div>')
+    const t0 = template('<div>', true)
     const { component: Grandson } = define({
       props: ['custom-attr'],
       setup(_: any, { attrs }: any) {
         const n0 = t0() as Element
-        watchEffect(() => setText(n0, attrs.foo))
+        renderEffect(() => setText(n0, attrs.foo))
         return n0
       },
     })
@@ -147,12 +149,13 @@ describe('attribute fallthrough', () => {
     const parentClass = ref('parent')
     const childClass = ref('child')
 
+    const t0 = template('<div>', true /* root */)
     const Child = defineVaporComponent({
       setup() {
-        const n = document.createElement('div')
+        const n = t0() as Element
         renderEffect(() => {
           // binding on template root generates incremental class setter
-          setClassIncremental(n, childClass.value)
+          setClass(n, childClass.value)
         })
         return n
       },
@@ -208,12 +211,13 @@ describe('attribute fallthrough', () => {
     const parentStyle: Ref<string | null> = ref('font-size:12px')
     const childStyle = ref('font-weight:bold')
 
+    const t0 = template('<div>', true /* root */)
     const Child = defineVaporComponent({
       setup() {
-        const n = document.createElement('div')
+        const n = t0() as Element
         renderEffect(() => {
           // binding on template root generates incremental class setter
-          setStyleIncremental(n, childStyle.value)
+          setStyle(n, childStyle.value)
         })
         return n
       },
@@ -272,4 +276,50 @@ describe('attribute fallthrough', () => {
     assertStyles()
     expect(getCSS()).not.toContain('font-size:bold')
   })
+
+  test('parent value should take priority', async () => {
+    const parentVal = ref('parent')
+    const childVal = ref('child')
+
+    const t0 = template('<div>', true /* root */)
+    const Child = defineVaporComponent({
+      setup() {
+        const n = t0()
+        renderEffect(() => {
+          // prop bindings on template root generates extra `root: true` flag
+          setProp(n, 'id', childVal.value)
+          setProp(n, 'aria-x', childVal.value)
+          setDynamicProps(n, [{ 'aria-y': childVal.value }])
+        })
+        return n
+      },
+    })
+
+    const { host } = define({
+      setup() {
+        return createComponent(Child, {
+          id: () => parentVal.value,
+          'aria-x': () => parentVal.value,
+          'aria-y': () => parentVal.value,
+        })
+      },
+    }).render()
+
+    const el = host.children[0]
+    expect(el.id).toBe(parentVal.value)
+    expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+    expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+
+    childVal.value = 'child1'
+    await nextTick()
+    expect(el.id).toBe(parentVal.value)
+    expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+    expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+
+    parentVal.value = 'parent1'
+    await nextTick()
+    expect(el.id).toBe(parentVal.value)
+    expect(el.getAttribute('aria-x')).toBe(parentVal.value)
+    expect(el.getAttribute('aria-y')).toBe(parentVal.value)
+  })
 })
diff --git a/packages/runtime-vapor/__tests__/dom/template.spec.ts b/packages/runtime-vapor/__tests__/dom/template.spec.ts
index f2847dbd2f..473104c8b8 100644
--- a/packages/runtime-vapor/__tests__/dom/template.spec.ts
+++ b/packages/runtime-vapor/__tests__/dom/template.spec.ts
@@ -11,6 +11,12 @@ describe('api: template', () => {
     expect(root2).not.toBe(root)
   })
 
+  test('create root element', () => {
+    const t = template('<div>', true)
+    const root = t()
+    expect(root.$root).toBe(true)
+  })
+
   test('children', () => {
     const t = template('<div><span><b>nested</b></span><p></p></div>')
     const root = t()
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 199b5ba6a8..2a7ffb0092 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -210,12 +210,9 @@ export function createComponent(
     Object.keys(instance.attrs).length
   ) {
     renderEffect(() => {
-      setDynamicProps(
-        instance.block as Element,
-        [instance.attrs],
-        true, // root
-        true, // fallthrough
-      )
+      isApplyingFallthroughProps = true
+      setDynamicProps(instance.block as Element, [instance.attrs])
+      isApplyingFallthroughProps = false
     })
   }
 
@@ -230,6 +227,8 @@ export function createComponent(
   return instance
 }
 
+export let isApplyingFallthroughProps = false
+
 /**
  * dev only
  */
@@ -423,10 +422,12 @@ export function createComponentWithFallback(
 
   // eslint-disable-next-line no-restricted-globals
   const el = document.createElement(comp)
+  // mark single root
+  ;(el as any).$root = isSingleRoot
 
   if (rawProps) {
     renderEffect(() => {
-      setDynamicProps(el, [resolveDynamicProps(rawProps)], isSingleRoot)
+      setDynamicProps(el, [resolveDynamicProps(rawProps)])
     })
   }
 
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index 790c134e0e..922e7d38db 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -9,48 +9,106 @@ import {
   toDisplayString,
 } from '@vue/shared'
 import { on } from './event'
-import { mergeProps, patchStyle, shouldSetAsProp, warn } from '@vue/runtime-dom'
+import {
+  currentInstance,
+  mergeProps,
+  patchStyle,
+  shouldSetAsProp,
+  warn,
+} from '@vue/runtime-dom'
+import {
+  type VaporComponentInstance,
+  isApplyingFallthroughProps,
+} from '../component'
 
 type TargetElement = Element & {
+  $root?: true
   $html?: string
   $cls?: string
   $sty?: NormalizedStyle | string | undefined
+  value?: string
+  _value?: any
 }
 
-export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
-  const value =
-    values.length > 1
-      ? values.map(toDisplayString).join('')
-      : toDisplayString(values[0])
-  if (el.$txt !== value) {
-    el.textContent = el.$txt = value
+const hasFallthroughKey = (key: string) =>
+  (currentInstance as VaporComponentInstance).hasFallthrough &&
+  key in currentInstance!.attrs
+
+export function setProp(el: any, key: string, value: any): void {
+  if (key in el) {
+    setDOMProp(el, key, value)
+  } else {
+    setAttr(el, key, value)
   }
 }
 
-export function setHtml(el: TargetElement, value: any): void {
-  value = value == null ? '' : value
-  if (el.$html !== value) {
-    el.innerHTML = el.$html = value
+export function setAttr(el: any, key: string, value: any): void {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return
+  }
+
+  if (value !== el[`$${key}`]) {
+    el[`$${key}`] = value
+    if (value != null) {
+      el.setAttribute(key, value)
+    } else {
+      el.removeAttribute(key)
+    }
   }
 }
 
+export function setDOMProp(el: any, key: string, value: any): void {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey(key)) {
+    return
+  }
+
+  const prev = el[key]
+  if (value === prev) {
+    return
+  }
+
+  let needRemove = false
+  if (value === '' || value == null) {
+    const type = typeof prev
+    if (value == null && type === 'string') {
+      // e.g. <div :id="null">
+      value = ''
+      needRemove = true
+    } else if (type === 'number') {
+      // e.g. <img :width="null">
+      value = 0
+      needRemove = true
+    }
+  }
+
+  // some properties perform value validation and throw,
+  // some properties has getter, no setter, will error in 'use strict'
+  // eg. <select :type="null"></select> <select :willValidate="null"></select>
+  try {
+    el[key] = value
+  } catch (e: any) {
+    // do not warn if value is auto-coerced from nullish values
+    if (__DEV__ && !needRemove) {
+      warn(
+        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
+          `value ${value} is invalid.`,
+        e,
+      )
+    }
+  }
+  needRemove && el.removeAttribute(key)
+}
+
 export function setClass(el: TargetElement, value: any): void {
-  if ((value = normalizeClass(value)) !== el.$cls) {
+  if (el.$root) {
+    setClassIncremental(el, value)
+  } else if ((value = normalizeClass(value)) !== el.$cls) {
     el.className = el.$cls = value
   }
 }
 
-/**
- * A version of setClass that does not overwrite pre-existing classes.
- * Used on single root elements so it can patch class independent of fallthrough
- * attributes.
- */
-export function setClassIncremental(
-  el: any,
-  value: any,
-  fallthrough?: boolean,
-): void {
-  const cacheKey = `$clsi${fallthrough ? '$' : ''}`
+function setClassIncremental(el: any, value: any): void {
+  const cacheKey = `$clsi${isApplyingFallthroughProps ? '$' : ''}`
   const prev = el[cacheKey]
   if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
     const nextList = value.split(/\s+/)
@@ -64,22 +122,17 @@ export function setClassIncremental(
 }
 
 export function setStyle(el: TargetElement, value: any): void {
-  const prev = el.$sty
-  value = el.$sty = normalizeStyle(value)
-  patchStyle(el, prev, value)
+  if (el.$root) {
+    setStyleIncremental(el, value)
+  } else {
+    const prev = el.$sty
+    value = el.$sty = normalizeStyle(value)
+    patchStyle(el, prev, value)
+  }
 }
 
-/**
- * A version of setStyle that does not overwrite pre-existing styles.
- * Used on single root elements so it can patch class independent of fallthrough
- * attributes.
- */
-export function setStyleIncremental(
-  el: any,
-  value: any,
-  fallthrough?: boolean,
-): NormalizedStyle | undefined {
-  const cacheKey = `$styi${fallthrough ? '$' : ''}`
+function setStyleIncremental(el: any, value: any): NormalizedStyle | undefined {
+  const cacheKey = `$styi${isApplyingFallthroughProps ? '$' : ''}`
   const prev = el[cacheKey]
   value = el[cacheKey] = isString(value)
     ? parseStringStyle(value)
@@ -88,21 +141,11 @@ export function setStyleIncremental(
   return value
 }
 
-export function setAttr(el: any, key: string, value: any): void {
-  if (value !== el[`$${key}`]) {
-    el[`$${key}`] = value
-    if (value != null) {
-      el.setAttribute(key, value)
-    } else {
-      el.removeAttribute(key)
-    }
+export function setValue(el: TargetElement, value: any): void {
+  if (!isApplyingFallthroughProps && el.$root && hasFallthroughKey('value')) {
+    return
   }
-}
 
-export function setValue(
-  el: Element & { value?: string; _value?: any },
-  value: any,
-): void {
   // store value as _value as well since
   // non-string values will be stringified.
   el._value = value
@@ -118,72 +161,38 @@ export function setValue(
   }
 }
 
-export function setProp(el: any, key: string, value: any): void {
-  if (key in el) {
-    setDOMProp(el, key, value)
-  } else {
-    setAttr(el, key, value)
+export function setText(el: Node & { $txt?: string }, ...values: any[]): void {
+  const value =
+    values.length > 1
+      ? values.map(toDisplayString).join('')
+      : toDisplayString(values[0])
+  if (el.$txt !== value) {
+    el.textContent = el.$txt = value
   }
 }
 
-export function setDOMProp(el: any, key: string, value: any): void {
-  const prev = el[key]
-  if (value === prev) {
-    return
-  }
-
-  let needRemove = false
-  if (value === '' || value == null) {
-    const type = typeof prev
-    if (value == null && type === 'string') {
-      // e.g. <div :id="null">
-      value = ''
-      needRemove = true
-    } else if (type === 'number') {
-      // e.g. <img :width="null">
-      value = 0
-      needRemove = true
-    }
-  }
-
-  // some properties perform value validation and throw,
-  // some properties has getter, no setter, will error in 'use strict'
-  // eg. <select :type="null"></select> <select :willValidate="null"></select>
-  try {
-    el[key] = value
-  } catch (e: any) {
-    // do not warn if value is auto-coerced from nullish values
-    if (__DEV__ && !needRemove) {
-      warn(
-        `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
-          `value ${value} is invalid.`,
-        e,
-      )
-    }
+export function setHtml(el: TargetElement, value: any): void {
+  value = value == null ? '' : value
+  if (el.$html !== value) {
+    el.innerHTML = el.$html = value
   }
-  needRemove && el.removeAttribute(key)
 }
 
-export function setDynamicProps(
-  el: any,
-  args: any[],
-  root = false,
-  fallthrough = false,
-): void {
+export function setDynamicProps(el: any, args: any[]): void {
   const props = args.length > 1 ? mergeProps(...args) : args[0]
-  const cacheKey = `$dprops${fallthrough ? '$' : ''}`
+  const cacheKey = `$dprops${isApplyingFallthroughProps ? '$' : ''}`
   const prevKeys = el[cacheKey] as string[]
 
   if (prevKeys) {
     for (const key of prevKeys) {
       if (!(key in props)) {
-        setDynamicProp(el, key, null, root, fallthrough)
+        setDynamicProp(el, key, null)
       }
     }
   }
 
   for (const key of (el[cacheKey] = Object.keys(props))) {
-    setDynamicProp(el, key, props[key], root, fallthrough)
+    setDynamicProp(el, key, props[key])
   }
 }
 
@@ -194,23 +203,13 @@ export function setDynamicProp(
   el: TargetElement,
   key: string,
   value: any,
-  root?: boolean,
-  fallthrough?: boolean,
-): any {
+): void {
   // TODO
   const isSVG = false
   if (key === 'class') {
-    if (root) {
-      return setClassIncremental(el, value, fallthrough)
-    } else {
-      setClass(el, value)
-    }
+    setClass(el, value)
   } else if (key === 'style') {
-    if (root) {
-      return setStyleIncremental(el, value, fallthrough)
-    } else {
-      setStyle(el, value)
-    }
+    setStyle(el, value)
   } else if (isOn(key)) {
     on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true })
   } else if (
diff --git a/packages/runtime-vapor/src/dom/template.ts b/packages/runtime-vapor/src/dom/template.ts
index 1206987b62..d321685f31 100644
--- a/packages/runtime-vapor/src/dom/template.ts
+++ b/packages/runtime-vapor/src/dom/template.ts
@@ -1,5 +1,5 @@
 /*! #__NO_SIDE_EFFECTS__ */
-export function template(html: string) {
+export function template(html: string, root?: boolean) {
   let node: ChildNode
   const create = () => {
     // eslint-disable-next-line no-restricted-globals
@@ -7,7 +7,11 @@ export function template(html: string) {
     t.innerHTML = html
     return t.content.firstChild!
   }
-  return (): Node => (node || (node = create())).cloneNode(true)
+  return (): Node & { $root?: true } => {
+    const ret = (node || (node = create())).cloneNode(true)
+    if (root) (ret as any).$root = true
+    return ret
+  }
 }
 
 /*! #__NO_SIDE_EFFECTS__ */
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index f9f2e5253f..f081ecf2ab 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -14,8 +14,6 @@ export {
   setHtml,
   setClass,
   setStyle,
-  setClassIncremental,
-  setStyleIncremental,
   setAttr,
   setValue,
   setProp,