The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

AgnosticUI requires the import of the common.min.css from your Astro base layout:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Select component:

import AgSelect from 'agnostic-astro/Select.astro';

Here's the agnostic-astro Select component in use:

<AgSelect class="mbs24 tennis-players"
        label="Who is the greatest tennis player of all-time? Select from below."
        uniqueId="players"
        size="large"
        isDisabled={false}
>
  <option value disabled>--Select your favorite tennis player of all time--</option>
  <option value="andre">Andre Agassi</option>
  <option value="serena">Serena Williams</option>
  <option value="roger">Roger Federer</option>
  <option value="mac">John McEnroe</option>
  <option value="martina">Martina Navratilova</option>
  <option value="rafa">Rafael Nadal</option>
  <option value="borg">Bjorn Borg</option>
  <option value="althea">Althea Gibson</option>
</AgSelect>      
<script>
// There are many ways to listen for select events; this is just one
// pedantic way built atop of good ole' platform JavaScript ;-)
const selectElement = document.querySelector('.tennis-players');
selectElement.addEventListener('change', (event) => {
  const select = event.target;
  const value = select.value;
  const description = select.selectedOptions[0].textContent;
  favorite.textContent = description + 'is your favorite tennis player!'
});
</script>