A way for props and named slot to be entangled

[y-nk]

Body

Summary

A brief, one or two sentence explanation of the proposal.

Background & Motivation

I have worked extensively on a few Astro websites and a pattern which i find extremely useful is the pattern "prop or named slot" to give consumer of my components a lot of power in their use.

Basically, the prop and named slot are named the same, the prop being "the default usecase" and the named slot gives a way to branch out and make some exceptions.

You can consider this component:

---
export type Props = { image?: string }
const { image } = Astro.props
---

<div>
  <slot name="image">
    {image && <img src={image} />} 
  </slot>
</div>

Goals

1. Discuss this pattern
2. Find a way to bind prop name and slot name so that it's a XOR validation
3. How to implement this? In the framework? In an additional lib?