Getting the AstroComponentFactory from slots | Astro Lounge | Page 1

kind tide Apr 21, 2025, 5:33 PM

I'm looking for assistance on retrieving all the unique AstroComponentFactory items from a slot inside a component. For example, I want to write this:

<Combobox.Container>
  <Combobox.Options>
    <Combobox.Option value="apple" label="Apple" />
    <Combobox.Option value="banana" label="Banana" />
    <Combobox.Option value="orange" label="Orange" />
  </Combobox.Options>
</Combobox.Container>

And from this, I need to retrieve each Combobox.Option to render the custom dropdown element and to render the options inside the native select element. Yes, I know I can pass in a props array/object like this:

const options = [
 { label: "Apple", value: "apple", },
 ...
];

But I'm looking to create a headless library of sorts with the former syntax. If I could grab an array of items inside a slot like an array of AstroComponentFactory items, I feel like I could hack up a way to make it work. Anyone have ideas or suggestions?

kind tide Apr 22, 2025, 1:00 PM

Going through the Astro codebase, I feel like it could be possible but will be lots of work

kind tide Apr 22, 2025, 3:05 PM

Here's a more specific example of what I'm tryng to accomplish. Given this Astro code:

<Combobox.Container>
  <Combobox.Label slot="label">Select an item</Combobox.Label>
  <Combobox.Options slot="options">
    <Combobox.Option value="milk" label="Milk" />
    <Combobox.Option value="chocolate" label="Chocolate" />
    <Combobox.Option value="rice" label="Rice" />
    <Combobox.Option value="eggs" label="Eggs" />
    <Combobox.Option value="cheese" label="Cheese" />
    <Combobox.Group label="Fruits">
      <Combobox.Option value="apple" label="Apple" />
      <Combobox.Option value="banana" label="Banana" />
      <Combobox.Option value="orange" label="Orange" />
    </Combobox.Group>
  </Combobox.Options>
</Combobox.Container>

I want to get this HTML after some processing:

<div>
  <label>Select an item</label>
  <dl>
    <dd>Milk</dd>
    <dd>Chocolate</dd>
    <dd>Rice</dd>
    <dd>Eggs</dd>
    <dd>Cheese</dd>
    <dt>Fruits</dt>
    <dd>Apple</dd>
    <dd>Banana</dd>
    <dd>Orange</dd>
  </dl>
  <select>
    <option>Milk</option>
    <option>Rice</option>
    <option>Eggs</option>
    <option>Cheese</option>
    <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Orange</option>
    </optgroup>
  </select>
</div>

Because the list items are repeated twice in different spots, a simple slot won't do the trick unless I render it and manually parse the result.

#Getting the AstroComponentFactory from slots