types for li html tag

[keen prism]

using astro how do I extend the types of a component with all the types for the li tag ?

[modern path]

Hi @keen prism. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can use Astro’s HTMLAttributes utility type from astro/types and pass it the tag name "li".

For example, to make a component whose props are all valid <li> attributes plus your own:

---
// src/components/MyLi.astro
import type { HTMLAttributes } from "astro/types";

interface Props extends HTMLAttributes<"li"> {
  // your extra props here
  isActive?: boolean;
}

const { isActive, ...attrs } = Astro.props;
---

<li {...attrs} class={isActive ? "active" : attrs.class}>
  <slot />
</li>

HTMLAttributes<"li"> gives you the full set of built‑in attributes for an <li> element, and you can extend it with your own fields via interface Props extends .... [Type utilities]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: