Astro Dynamic HTML Tag
Variable
A variable set to an HTML tag name can be used to create a dynamic HTML element:
astro
---// The dynamic tag variable must be capitalized// otherwise Astro will render it as a literal HTML tagconst Element = 'div';---<Element>Dynamic HTML element content</Element>
Component Prop
Astro component that accepts an HTML tag name as a prop:
astro
---import type { HTMLTag } from 'astro/types';export interface Props { // Accept any supported HTML/SVG element name tag?: HTMLTag;}const { // Rename the HTML tag prop to capitalize it tag: Element = 'div', ...props} = Astro.props;---<Element {...props}>Dynamic HTML element content</Element>