Open
Description
Vue version
3.5.17
Link to minimal reproduction
Steps to reproduce
Since Chrome 134, we can customize a <SELECT>
, for example with the below code:
<select v-model="val">
<button>{{ val }}</button>
<option value="Hello">
<b>Hello</b>
<span>sub line</span>
</option>
<option value="World">
<b>World</b>
<span>sub line</span>
</option>
</select>
And it renders as the below:

What is expected?
Vue should accept this syntax.
What is actually happening?
Vue shows warning messages in the console:
[Vue warn]: <button> cannot be child of <select>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.
[Vue warn]: <b> cannot be child of <option>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.`
System Info
System:
OS: Windows 11 10.0.22631
CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-1370P
Memory: 8.02 GB / 31.66 GB
Binaries:
Node: 20.12.1 - ~\AppData\Local\Volta\tools\image\node\20.12.1\node.EXE
npm: 10.5.0 - ~\AppData\Local\Volta\tools\image\node\20.12.1\npm.CMD
Browsers:
Edge: Chromium (135.0.3179.85)
Internet Explorer: 11.0.22621.3527
npmPackages:
vue: ^3.5.17 => 3.5.17
Any additional comments?
Using data-allow-mismatch
doesn't remove these warning messages.