A blog about programming, Web development, Open Source, Linux and DevOps.

Astro Dynamic HTML Tag


A variable set to an HTML tag name can be used to create a dynamic HTML element:

// The dynamic tag variable must be capitalized
// otherwise Astro will render it as a literal HTML tag
const Element = 'div';

<Element>Dynamic HTML element content</Element>

Component Prop

Astro component that accepts an HTML tag name as a prop:

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',
} = Astro.props;

<Element {...props}>Dynamic HTML element content</Element>