')
+ const { component: Child } = define({
+ props: ['foo'],
+ setup(props: any) {
+ const n0 = t0()
+ const n1 = t1()
+ renderEffect(() => setElementText(n1, props.foo))
+ return [n0, n1]
+ },
+ })
+
+ const foo = ref(1)
+ const id = ref('a')
+ const { host } = define({
+ setup() {
+ return createComponent(
+ Child,
+ {
+ foo: () => foo.value,
+ id: () => id.value,
+ },
+ null,
+ true,
+ )
+ },
+ }).render()
+ expect(host.innerHTML).toBe('
1
')
+
+ foo.value++
+ await nextTick()
+ expect(host.innerHTML).toBe('
2
')
+
+ id.value = 'b'
+ await nextTick()
+ expect(host.innerHTML).toBe('
2
')
+ })
+
+ it('if block', async () => {
+ const t0 = template('
foo
', true)
+ const t1 = template('
bar
', true)
+ const t2 = template('
baz
', true)
+ const { component: Child } = define({
+ setup() {
+ const n0 = createIf(
+ () => true,
+ () => {
+ const n2 = t0()
+ return n2
+ },
+ () =>
+ createIf(
+ () => false,
+ () => {
+ const n4 = t1()
+ return n4
+ },
+ () => {
+ const n7 = t2()
+ return n7
+ },
+ ),
+ )
+ return n0
+ },
+ })
+
+ const id = ref('a')
+ const { host } = define({
+ setup() {
+ return createComponent(
+ Child,
+ {
+ id: () => id.value,
+ },
+ null,
+ true,
+ )
+ },
+ }).render()
+ expect(host.innerHTML).toBe('
foo
')
+ })
+
+ it('should not allow attrs to fallthrough on component with multiple roots', async () => {
+ const t0 = template('
')
+ const t1 = template('')
+ const { component: Child } = define({
+ props: ['foo'],
+ setup(props: any) {
+ const n0 = t0()
+ const n1 = t1()
+ renderEffect(() => setElementText(n1, props.foo))
+ return [n0, n1]
+ },
+ })
+
+ const foo = ref(1)
+ const id = ref('a')
+ const { host } = define({
+ setup() {
+ return createComponent(
+ Child,
+ {
+ foo: () => foo.value,
+ id: () => id.value,
+ },
+ null,
+ true,
+ )
+ },
+ }).render()
+ expect(host.innerHTML).toBe('
1
')
+ })
+
+ it('should not allow attrs to fallthrough on component with single comment root', async () => {
+ const t0 = template('')
+ const { component: Child } = define({
+ setup() {
+ const n0 = t0()
+ return [n0]
+ },
+ })
+
+ const id = ref('a')
+ const { host } = define({
+ setup() {
+ return createComponent(Child, { id: () => id.value }, null, true)
+ },
+ }).render()
+ expect(host.innerHTML).toBe('')
+ })
+
it('should not fallthrough if explicitly pass inheritAttrs: false', async () => {
const t0 = template('
', true)
const { component: Child } = define({
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 72a068508d5..cae2bd7860d 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -48,6 +48,7 @@ import {
EMPTY_OBJ,
ShapeFlags,
invokeArrayFns,
+ isArray,
isFunction,
isString,
} from '@vue/shared'
@@ -832,4 +833,25 @@ function getRootElement(block: Block): Element | undefined {
return nodes
}
}
+
+ // The root node contains comments. It is necessary to filter out
+ // the comment nodes and return a single root node.
+ // align with vdom behavior
+ if (isArray(block)) {
+ let singleRoot: Element | undefined
+ let hasComment = false
+ for (const b of block) {
+ if (b instanceof Comment) {
+ hasComment = true
+ continue
+ }
+ const thisRoot = getRootElement(b)
+ // only return root if there is exactly one eligible root in the array
+ if (!thisRoot || singleRoot) {
+ return
+ }
+ singleRoot = thisRoot
+ }
+ return hasComment ? singleRoot : undefined
+ }
}
diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index c7f9631509f..9167d2b9b3b 100644
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -430,16 +430,10 @@ function setHtmlToBlock(block: Block, value: any): void {
}
}
-export function setDynamicProps(
- el: any,
- args: any[],
- root?: boolean,
- isSVG?: boolean,
-): void {
+export function setDynamicProps(el: any, args: any[], isSVG?: boolean): void {
const props = args.length > 1 ? mergeProps(...args) : args[0]
const cacheKey = `$dprops${isApplyingFallthroughProps ? '$' : ''}`
const prevKeys = el[cacheKey] as string[]
- if (root) el.$root = root
if (prevKeys) {
for (const key of prevKeys) {