Better support for Styleable/Customizable Select Elements

[fimion]

Vue version

3.5.13

Link to minimal reproduction

https://codepen.io/fimion/pen/JojxBwv

Steps to reproduce

Currently when using the new Customizeable select syntax, build errors will be thrown due to the fact it can have more types of elements inside of it. There are also likely hydration issues for browsers that do not support this syntax yet.

Codepen Demo
(New syntax only works in chromium based browsers as of April 3rd, 2025)

The new syntax allows for extra elements to exist as children of the select element, and the option element.

<style>
select,::picker(select){
  appearance: base-select;
}
</style>
<select>
  <button><selectedcontent></selectedcontent></button>
  <option vlaue="1"><span>Option 1</span></option>
</select>

This ticket might end up being a place holder, as there are several issues that need to be resolved for proper support of this feature.

What is expected?

Vue should not warn about the fact that these elements are inside the select/option element

What is actually happening?

Vue does warn that these elements are inside the select/option element.

System Info

System:
    OS: macOS 15.3.2
    CPU: (12) arm64 Apple M2 Max
    Memory: 190.89 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Edge: 134.0.3124.95
    Safari: 18.3.1
    Safari Technology Preview: 18.4

Any additional comments?

I have not looked at what happens with hydration, but my guess is there will be issues there as well.

[edison1105]

Note: selectedcontent is under experimentation
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/selectedcontent