fix(compiler-vapor): propagate component root through Transition

Project: vuejs/core | Language: TypeScript | Concepts: data-structures, refactoring, testing-strategy | Difficulty: mid
Link: https://github.com/vuejs/core/pull/15275

The problem

When a component's root element is wrapped in a <Transition>, class and style bindings from the parent component were not being merged correctly onto the child root. This broke expected "fallthrough" behavior for classes and styles, leading to missing or incorrect class/style attributes on the rendered DOM.

Why it's non-trivial

A naive fix might only handle direct root elements, missing the case where the root is wrapped in a Transition (which is a special component, not a plain template). The compiler needs to treat Transition-wrapped roots as "transparent" for the purpose of root detection and merging, similar to how it treats <template> elements. Failing to do so would break class/style merging in subtle ways, especially when the root is dynamic.

The approach

1. Update the single-root detection logic to treat Transition nodes like templates

-import { isConstantExpression, isStaticExpression } from './utils'
+import {
+  isConstantExpression,
+  isStaticExpression,
+  isTransitionNode,
+} from './utils'

This imports the new isTransitionNode utility, preparing to use it in root detection.

-    return (
-      this.node.type === NodeTypes.ELEMENT &&
-      this.node.tagType === ElementTypes.TEMPLATE &&
+    return (
+      this.node.type === NodeTypes.ELEMENT &&
+      (this.node.tagType === ElementTypes.TEMPLATE ||
+        isTransitionNode(this.node)) &&
       !!this.parent &&
       this.isSingleRoot
     )

Here, the check for a "transparent" root is extended: it now returns true if the node is either a <template> or a Transition node, allowing class/style fallthrough to work when the root is wrapped in Transition.

2. Add regression tests to verify correct merging of classes through Transition-wrapped roots

+  // #15274
+  test('should merge fallthrough class with a transition child root', async () => {
+    const data = ref({
+      internalClass: 'internal-box',
+      externalClass: 'external-class',
+    })
+    const Child = compile(
+      `<template>
+        <Transition>
+          <div class="box" :class="data.internalClass">child</div>
+        </Transition>
+      </template>`,
+      data,
+    )
+    const App = compile(
+      `<template>
+        <components.Child :class="data.externalClass" />
+      </template>`,
+      data,
+      { Child },
+    )
+    const { host } = define(App as any).render()
+    const el = host.querySelector('div')!
+
+    expect([...el.classList]).toEqual(
+      expect.arrayContaining(['external-class', 'box', 'internal-box']),
+    )
+    expect(el.classList).toHaveLength(3)
+
+    data.value.internalClass = 'internal-next'
+    data.value.externalClass = 'external-next'
+    await nextTick()
+
+    expect([...el.classList]).toEqual(
+      expect.arrayContaining(['external-next', 'box', 'internal-next']),
+    )
+    expect(el.classList).toHaveLength(3)
+  })

This test validates that when the root is wrapped in a Transition, both static and dynamic classes are merged correctly from both parent and child, and that updates propagate as expected.

From the review thread

No notable review discussion on this PR.

Takeaways

• When implementing transparent wrappers (like <template> or special components such as <Transition>), always ensure that root-detection and attribute merging logic treats them consistently.
• Regression tests should verify both initial and dynamic updates, especially for subtle fallthrough behaviors involving class/style merging.
• Utility functions (like isTransitionNode) can help centralize and clarify special-case logic, reducing duplication and errors in complex tree traversal code.