Custom select nativo experimental

Custom select nativo

Custom select nativo (experimental)

De momento no está disponible, sólo se puede probar usando Canary (Edge o Chrome) y habilitando los flags experimentales:

  • edge://flags/#enable-experimental-web-platform-features
  • chrome://flags/#enable-experimental-web-platform-features

Ojalá algún día llegue a todos los navegadores, parece mentira que para las etiquetas <select> no pasara el tiempo, siguen sin poder customizarse sin ningún hack mediante javascript

Se puede obtener más información en el siguiente enlace: https://open-ui.org/

Etiquetas de custom select nativo

Mirando el código, se puede observar que aparecen dos nuevas etiquetas:

  • <selectmenu>: etiqueta contenedora de todo
  • <popup>: etiquetas contenedoras de los <option>

Atributos de custom select nativo

Aparecen nuevos atributos relacionados con la activación del selector desplegable y de la opción seleccionada

<div slot="button" behavior="button">
  <button behavior="selected-value"></button>
</div>
<popup slot="listbox" behavior="listbox">
  <option>Item</option>
</popup>

En este PEN puede verse el ejemplo, pero si no estás usando Chrome Canary o Edge Canary con las flags experimentales habilitadas no podrás verlo

Y el código en github