Better syntax for scoped slots

[Soviut]

I was asking in the Astro Discord if "scoped slots" like Vue has were possible in Astro. Scoped slots allow you to pass values from within the component up to the slot template. This is really useful for building data-driven components that need different layouts. You bind the scoped props to the slot and each layout will have access to them.

MyList.vue (component)

<script setup lang="ts">
defineProps<{
  items: string[]
}>()
</script>

<template>
  <ul>
    <li v-for="(item, index) in items">
      <slot :item="item" :index="index" :total="items.length" />
    </li>
  </ul>
</template>

Usage

<MyList :items="items" v-slot="{ item, index, total }">
  <div>
    {{item}}
    <span>( {{index}} / {{total}} )</span>
  </div>
</MyList>

Same component, different slot layout

<MyList :items="items" v-slot="{ item, index }">
  <div>
    {{index}} : {{item}}
  </div>
</MyList>

It turns out the concept DOES exists in Astro, but it requires a dramatically different approach to define them. Additionally, the docs don't show this approach in the Slots section of the Component docs (there's a ticket to do so withastro/docs#8855)

---
const { items } = Astro.props;
const total = items.length
---
<ul>
  {items.map((item, index, list) => (
    <li set:html={Astro.slots.render('default', [item, index, total])} />
  ))}
</ul>

<MyList items={numbers}>
  {(item, index, total) => (
    <ul>
      <li>{item} ( {index} / {total} )</li>
    </ul>
  )}
</MyList>

While it works, the implementation is a huge departure from other slot behaviour. I propose that friendly syntax similar to what Vue does be implemented to make scoped slots easier to build. Let values be bound to the element itself.

I realize this also might require some adjustment to how slots are rendered since Vue lets a slot exist inside a loop.