# Compose typings

## `as` prop scenarios

Proposal: JSX in the as prop
Why:
* Component can encapsulate its typings
* Props can be provided which may override what the component passes along to the slot
* Can enable scenarios when props collide, such as when the component has its own `as` prop:

<Thing as={ <Foo bar="2" /> } bar="1" />

type PropsWithAs<AsProps, Props> = AsProps extends string ? 
{ as: NativeElement } & Omit<Props, ''> :
{ as: (props: AsProps)=> JSX.Element} & Props

## References

### styled-components usage with slots

https://styled-components.com/docs/api#as-polymorphic-prop

Why wouldn't `as` just take in primitive only? Because libraries like `styled-components` are built to provide styled primitive replacements:

const Foo = styled.div`
  background: red;
  color: white;
`;

const App = () => (
  <>
    // Works today
    <Button as={ Foo }>Hello</Button>
    
    // Passing in `as` to the styled component doesn't work today, but could.
    <Button as={{ type: Foo, props: { as: 'li' } }}>Hello</Button>
    
    // ...and JSX makes shorthand of the above
    <Button as={ <Foo as="li" /> }>Hello</Button>
  </>
);