Astroで動的にHTMLタグを変更する

Astroで変数を使ってHTMLタグを変更する方法をメモ。

サンプルコード

HTMLタグを変数に割り当て、その変数名をタグとして使用すればOKです。

---
const LogoTag = 'h1';
---
<LogoTag>ロゴ</LogoTag>

変数でタグを設定するデモページ

注意点として、変数は大文字で始める必要があります。
先頭が小文字の場合、HTMLタグとしてレンダリングしてしまうようです。

---
const logoTag = 'h1';
---
<logoTag>ロゴ</logoTag>

先頭が小文字の場合のデモページ

逆に言うと、HTMLタグの先頭を大文字にしてしまうと動的なタグとしてレンダリングしようとしてエラーになるので注意してください。

<Div>テスト</Div>