Qwik Polymorphic Component Example

polymorphic.ts

import type { QwikIntrinsicElements } from "@builder.io/qwik";
import { component$, Slot } from "@builder.io/qwik";

export default component$(
  <C extends keyof QwikIntrinsicElements>(props: PolyProps<C>) => {
    const Component = (props.as ?? "div") as string;
    return (
      <Component {...props}>
        <Slot />
      </Component>
    );
  }
);

export type PolyProps<C extends keyof QwikIntrinsicElements> =
  QwikIntrinsicElements[C] & {
    as?: C;
  };


// These all work with correct types
/*
<>
  <Poly>Hello from a div</Poly>
  <Poly as="a" href="/blog">Blog</Poly>
  <Poly as="input" onInput$={(ev, el) => console.log(el.value)} />
  // <Poly as={OtherComponent} someProp /> @todo
</>
*/