vuejs
new customizable select elements not supported
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
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
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
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.
Hi there! I was working on this bug as a new dev to see if I could find the solution, and I have been researching the issue. The warnings above are not thrown directly via the view codebase as far as I can tell, but are retrieved directly from the dom. Any of the potential files where those errors would be thrown do not have that text built in, but rather it is an error pulled from a browser response.
You are correct in the statement that the HTML standard has been updated to support children inside of an option element. However, the warning is still being thrown by browsers, potentially implying the browsers themselves have not updated and continue to utilize legacy practices when checking for "permitted nesting" during hydration.
This ultimately seems to be an issue with some but not all browsers. I do not know what Vue SFC has going on with it but it seems to consistently throw the warning whilst codepen only throws the selectedcontent issue.
https://playcode.io/vue-playground--019ad39e-b956-7440-ad5e-c2172188270b
Due to the inconsistent nature, I am not sure how I would go about a fix other than waiting for browsers to update to new HTML standards across the board.
@MrpZellen it shows the warning even in browsers that support the new features. see #9249 to see the relevant code that throws the warning. I think you may be confusing the warning being thrown by the vue runtime with the warning being thrown by the browser.