dx(vnode): warn on render child nodes in self-closing tag

[yangxiuxiu1115]

fix #12136

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB	38.1 kB	34.2 kB
vue.global.prod.js	160 kB	58 kB	51.5 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.1 kB	18.9 kB	17.3 kB
createApp	55.7 kB	21.4 kB	19.6 kB
createSSRApp	59.7 kB	23.1 kB	21 kB
defineCustomElement	60.4 kB	23 kB	20.9 kB
overall	69.4 kB	26.5 kB	24.1 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12137

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12137

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12137

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12137

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12137

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12137

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12137

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12137

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12137

vue

pnpm add https://pkg.pr.new/vue@12137

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12137

commit: 44a6b08

[edison1105]

I don't think this is a correct fix.

• Firstly, rendering elements inside an <img> tag is unreasonable.
• Secondly, <img><span>1</span></img>, the internal <span> will be rendered. But <component is="img"><span>1</span></component>, the internal <span> will not be rendered. see Playground

If we really want to solve this issue

• the internal <span> should be rendered. When mounting an element, if it is a void tag, its children should be rendered as sibling nodes. Not sure if this is worth it.
• or, gives a warning if the user tries to render nodes in the void tag

[yangxiuxiu1115]

you're right, hydrate checks shouldn't be skipped no matter what.

[edison1105]

@yangxiuxiu1115
The solution I recommend is to give warnings in the DEV. Both ssr and client, when render the child node to a void tag, give the user a warning.
Note, this only happens in <component is="VOID_TAG">child nodes</component>
Would you like to give it a try?

[yangxiuxiu1115]

sure, I'd love to.