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.

Ensure you've installed the agnostic-astro npm package (note this installs depedency agnostic-css as well):

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties:

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>