New allowed HTML Tags as children for `<SELECT>` and `<OPTION>`, and `data-allow-mismatch` does not remove warning

[Aymkdn]

Vue version

3.5.17

Link to minimal reproduction

https://play.vuejs.org/#eNqtVNtqGzEQ/ZVBhSYNWTshKQXVDbQm0PahLU2hLwtFXo1txVpJ6OILxv/eWcnr+MFJXwrLrmbO0cyZ0Wi37KNzg2VCxtkoNF65eFcbXDvrI0iciqQjbGsDIEUUcP6mGAAeY/KmtwCWQvOzs2Ltug+96BkND0HJiNg6LSKSBTAKqLGJsKxaK1F/qBnFqFnGCJ2kGK3JaSuhtV1VrQqtiM38brvt0sFuNxoWVr/HuqhoD4EJKd5npH2HiF3Mk+EyjUI98YITpzOHNAGtDFJZROnTDkveZ1T8tl7Lf6vItP+lgpDcXDJGw6OukxniRnfLfffzAQrnUHhhGuQwEQGrAr7vsJWScc7h+urKrbPDCSmVmXG43Tsm1kv0RHFrCFYrCa/G4/ERVHkhVQocropTNIuZt8nIqrHa0s5IuakUj6bktE40Km4oJJk0RbUZXsBDJxziHEF666RdGZJiUMPFsK+Gc6eaBfrzYu6H9fnqKPS+DfszK5OuAvVrw6caS4HdopLKE5FIHEh1ak2GhFYzUylqMZWXeSEKX6qYCdeX/JrzZo7NohV+0d+ZPg0YazCzDlcmHxG7ZDE01kzVbPAYrKEbmnfWrLGtUxr99yw61Iz3MWuWR+Vr9kWf8LL35/Qn/I9h3flq9sNjQL/Emh0wqmSGscD3D99wTesDSJc2aWK/AP5EGofUaSy0T3TkJPuIl9V+abu/DY3Ur3C/jmhCX1QnNPcl8+n/kHD8QulPcm8Gt30/qYt/lui7mNTAm8HbwfU7tvsLogSpzQ==

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.

[amachang]

Hi @Aymkdn,

I've submitted a PR (#13720) that addresses this warning. The issue is that Vue's HTML nesting validation hasn't been updated to reflect the Chrome 134+ specification changes that allow:

• <button> elements as children of <select>
• Inline elements like <span>, <b>, etc. as children of <option>

The fix updates the validation rules while maintaining backward compatibility (block-level elements like <div> and <p> are still not allowed inside options).

[amachang]

I've created PR #13720 to address this issue. Please feel free to review it when you have time, and close it if it doesn't align with the project's direction.

The changes update the HTML nesting validation to match Chrome 134+ spec while maintaining backward compatibility.