Skip to content

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

Open
@Aymkdn

Description

@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:

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🍰 p2-nice-to-havePriority 2: this is not breaking anything but nice to have it addressed.scope: compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions