fix: warn extraneous attributes for non-single-root components and prevent Teleport attribute fallthrough.

Author: edison1105

packages/runtime-vapor/__tests__/componentAttrs.spec.ts

@@ -306,7 +306,7 @@ describe('attribute fallthrough', () => {
     expect(html()).toMatch(`<div class="child parent">1</div>`)
   })
 
-  it.todo('should warn when fallthrough fails on non-single-root', () => {
+  it('should warn when fallthrough fails on non-single-root', () => {
     const Parent = {
       setup() {
         return createComponent(Child, {
@@ -330,7 +330,7 @@ describe('attribute fallthrough', () => {
     expect(`Extraneous non-emits event listeners`).toHaveBeenWarned()
   })
 
-  it.todo('should warn when fallthrough fails on teleport root node', () => {
+  it('should warn when fallthrough fails on teleport root node', () => {
     const Parent = {
       render() {
         return createComponent(Child, { class: () => 'parent' })
@@ -890,6 +890,7 @@ describe('attribute fallthrough', () => {
       },
     }).render()
     expect(host.innerHTML).toBe('<span></span><div>1</div>')
+    expect(`Extraneous non-props attributes (id)`).toHaveBeenWarned()
   })
 
   it('should not allow attrs to fallthrough on component with single comment root', async () => {
@@ -908,6 +909,7 @@ describe('attribute fallthrough', () => {
       },
     }).render()
     expect(host.innerHTML).toBe('<!--comment-->')
+    expect(`Extraneous non-props attributes (id)`).toHaveBeenWarned()
   })
 
   it('should not fallthrough if explicitly pass inheritAttrs: false', async () => {

packages/runtime-vapor/src/component.ts

@@ -28,6 +28,7 @@ import {
   startMeasure,
   unregisterHMR,
   warn,
+  warnExtraneousAttributes,
 } from '@vue/runtime-dom'
 import {
   type Block,
@@ -410,7 +411,7 @@ export function setupComponent(
     if (root) {
       renderEffect(() => applyFallthroughProps(root, instance.attrs))
     } else if (__DEV__ && isArray(instance.block)) {
-      // TODO warn extraneous attributes
+      warnExtraneousAttributes(instance.attrs)
     }
   }
 

packages/runtime-vapor/src/components/Teleport.ts

@@ -9,14 +9,14 @@ import {
   queuePostFlushCb,
   resolveTeleportTarget,
   warn,
+  warnExtraneousAttributes,
 } from '@vue/runtime-dom'
 import { type Block, type BlockFn, insert, remove } from '../block'
 import { createComment, createTextNode, querySelector } from '../dom/node'
 import {
   type LooseRawProps,
   type LooseRawSlots,
   type VaporComponentInstance,
-  applyFallthroughProps,
   isVaporComponent,
 } from '../component'
 import { rawPropsProxyHandlers } from '../componentProps'
@@ -148,14 +148,11 @@ export class TeleportFragment extends VaporFragment<Block[]> {
       this.$transition = applyTransitionHooks(this.nodes, this.$transition)
     }
 
-    // fallthrough attrs
+    // preventing attrs fallthrough
+    // consistent with VDOM Teleport behavior
     const instance = this.parentComponent as VaporComponentInstance
-    if (
-      instance.hasFallthrough &&
-      Object.keys(instance.attrs).length &&
-      this.nodes instanceof Element
-    ) {
-      applyFallthroughProps(this.nodes, instance.attrs)
+    if (instance.hasFallthrough && Object.keys(instance.attrs).length) {
+      warnExtraneousAttributes(instance.attrs)
     }
 
     insert(