refactor: manage fallthrough attributes for dynamic fragments using a dedicated attrs property instead of a root flag.

Author: edison1105

packages/runtime-vapor/src/component.ts

@@ -407,7 +407,12 @@ export function setupComponent(
     component.inheritAttrs !== false &&
     Object.keys(instance.attrs).length
   ) {
-    const root = getRootElement(instance.block, false)
+    const root = getRootElement(
+      instance.block,
+      // attach attrs to dynamic fragments for applying during each update
+      frag => (frag.attrs = instance.attrs),
+      false,
+    )
     if (root) {
       renderEffect(() => applyFallthroughProps(root, instance.attrs))
     } else if (
@@ -865,23 +870,26 @@ export function getExposed(
 
 export function getRootElement(
   block: Block,
+  onDynamicFragment?: (frag: DynamicFragment) => void,
   recurse: boolean = true,
 ): Element | undefined {
   if (block instanceof Element) {
     return block
   }
 
   if (recurse && isVaporComponent(block)) {
-    return getRootElement(block.block, recurse)
+    return getRootElement(block.block, onDynamicFragment, recurse)
   }
 
   if (isFragment(block) && !(block instanceof TeleportFragment)) {
-    if (block instanceof DynamicFragment) block.root = true
+    if (block instanceof DynamicFragment && onDynamicFragment) {
+      onDynamicFragment(block)
+    }
     const { nodes } = block
     if (nodes instanceof Element && (nodes as any).$root) {
       return nodes
     }
-    return getRootElement(nodes, recurse)
+    return getRootElement(nodes, onDynamicFragment, recurse)
   }
 
   // The root node contains comments. It is necessary to filter out
@@ -895,7 +903,7 @@ export function getRootElement(
         hasComment = true
         continue
       }
-      const thisRoot = getRootElement(b, recurse)
+      const thisRoot = getRootElement(b, onDynamicFragment, recurse)
       // only return root if there is exactly one eligible root in the array
       if (!thisRoot || singleRoot) {
         return

packages/runtime-vapor/src/fragment.ts

@@ -77,7 +77,9 @@ export class DynamicFragment extends VaporFragment {
   current?: BlockFn
   fallback?: BlockFn
   anchorLabel?: string
-  root?: boolean
+
+  // fallthrough attrs
+  attrs?: Record<string, any>
 
   // get the kept-alive scope when used in keep-alive
   getScope?: (key: any) => EffectScope | undefined
@@ -204,21 +206,16 @@ export class DynamicFragment extends VaporFragment {
 
       if (parent) {
         // fallthrough attrs
-        if (
-          this.root &&
-          this.parentComponent &&
-          (this.parentComponent as VaporComponentInstance)!.hasFallthrough &&
-          Object.keys(this.parentComponent!.attrs).length
-        ) {
+        if (this.attrs) {
           if (this.nodes instanceof Element) {
-            applyFallthroughProps(this.nodes, this.parentComponent!.attrs)
+            applyFallthroughProps(this.nodes, this.attrs)
           } else if (
             __DEV__ &&
             // preventing attrs fallthrough on slots
             // consistent with VDOM slots behavior
             this.anchorLabel === 'slot'
           ) {
-            warnExtraneousAttributes(this.parentComponent!.attrs)
+            warnExtraneousAttributes(this.attrs)
           }
         }