[✨] Access Slots in parent component

Is your feature request related to a problem?

I've got a Select element and I want to display the content of the selected option :

<Select value="a">
  <Option value="a">Hello <b>World</b></Option>
  <Option value="b">Lorem Ipsum</Option>
</Select>

Here the Select has the default value selected to "a" so it should display the content of the Option with value "a". As we cannot access the DOM in the server, I wanted to access the elements in the Slot and find the one with the value. Unfortunately, this is possible with children, but not with Slot.

Describe the solution you'd like

Access a Readonly list of the JSXNode like you would do with children. Maybe something like that :

export const Select = component$(({ value, placeholder }: SelectProps) => {
  const slots = useSlot(); // snapshot of the elements in the Slot
  const initialContent = slots.default.find((option) => option.props.value === value) ?? '';
  const displayContent = useSignal(initialContent);

  return <>
    <button>{displayContent.value ?? placeholder}</button>
    <dialog>
      <Slot/> {/* Options here */}
    </dialog>
  </>
});

Describe alternatives you've considered

Use inline component and children. Or use DOM manipulation in the server if it becomes possible.

Additional context

No response

QwikDev / qwik