new customizable select elements not supported

[Calvin-LL]

Vue version

v3.5.18

Link to minimal reproduction

https://play.vuejs.org/#eNqllcGO0zAQhl/F8gmkbSO0IKEQKsGyCDjAinKMhFxn2njr2JbtlKJVHwGJA/d9Bi5IvBWPwNjedtNqtaukt8nMPzNfptHfK/rKmPGqBZrTwnErjCcOfGsmpSqylMAQHzw0RjIP+ERIMde2iRHGQRsCDCWbgSRYfFlSA37kQAL3JZ1MY0AwlxdZVN02JRER1WHTVoGaWeu9Vp3Mrg8qrpUH5SfIe5DpDMh2EzpJbbzQiqyYbAGX48oLCcwBniAisQBcZEnWnXbQyNk+boAzTBEumXNYFwhUUsKsYKNaVBUoTHrbAnb9u/75G8lR3u2f7A9I+0bxcNhzxpAqCPbe8EHMSi+OwfzTF/ONXgzBrFnjPNhjUP/2RX2Xdg7B5bXgS0Ca4bi/en8AaecQ3Llw9TGs131Z3+LCIaBOsWXYOZj0R1/Sadj4MOrWZ7b+lyUDLLIbUyyyjlfio/PfJVoK1wYqzKTmk1LluQm/on2UMo/JVRjDjAFmmeKQkxl60Y0dvijVJlpyGIZT6An1OFLNxWJ86bRC/47t+D3qxggJ9lOkdiXN0+BQY1Lqbx9iLtwJIVKe18CXd+Qv3TrkSnphwYFd4WV3Nc/sAtD3Qvl8+hHWGO+Kja5aiep7ip/BadkGxiR73aoKsTu6SPu+Mdp6oRZf3PkaXd1tXyr+0KjcRH1J8U/s7J5Xv8U9HT+NfXhRvOLXFdgwEw94On42fvKcbv4DZ8BC6w==

Steps to reproduce

Run the reproduction above with the new customizable select elements.

Includes the new <selectedcontent> element or having <button> inside <select>, and elements inside <option>.

What is expected?

no errors or warnings

What is actually happening?

Get these warnings:

Failed to resolve component: selectedcontent
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

,

<button> cannot be child of <select>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

and

<span> cannot be child of <option>, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.

System Info

Any additional comments?

should wait for #9249 to avoid conflicts with existing components named selectedcontent

• <select>
  • HTML standard select element inner content elements: https://html.spec.whatwg.org/multipage/dom.html#select-element-inner-content-elements
  • HTML specs: https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
  • MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select
• <optgroup>
  • HTML standard optgroup element inner content elements: https://html.spec.whatwg.org/multipage/dom.html#optgroup-element-inner-content-elements
  • HTML specs: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element
  • MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup
• <option>
  • HTML standard option element inner content elements: https://html.spec.whatwg.org/multipage/dom.html#option-element-inner-content-elements
  • HTML specs: https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element
  • MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option
• <selectedcontent>
  • HTML specs: https://html.spec.whatwg.org/multipage/form-elements.html#the-selectedcontent-element
  • MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent

[NikolayValev]

This doesn't seem like a real issue.
button cannot be child of select, according to HTML specifications. This can cause hydration errors or potentially disrupt future functionality.vue

[Calvin-LL]

the above comment seems to be bot engagement bait but in case it wasn't. please read the issue for context. the HTML standard has been updated to allow this.

only reply in a haiku as required by the rules

[NikolayValev]

the above comment seems to be bot engagement bait but in case it wasn't. please read the issue for context. the HTML standard has been updated to allow this.

only reply in a haiku as required by the rules

I double checked the spec, you are right. I'm not much of a writer, so no haiku.