Description
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.4Any additional comments?
I have not looked at what happens with hydration, but my guess is there will be issues there as well.