Astroでフラグメントを使用する

Astroでフラグメントを使用する方法をメモ。

サンプルコード

例として、HTML文字列を出力するコンポーネント(Sentence.astro)があるとします。
set:htmlを使うことでHTML文字列をレンダリングすることができます。

---
const htmlString = '<p>HTMLコンテンツ</p>';
---
<div set:html={htmlString}></div>

このコンポーネントをimportして使うことで、表示を確認できます。

---
import Sentence from '../../components/Sentence.astro';
---
<Sentence />

ただこの方法の場合、不要なdivでラップされてしまいます。
フラグメントのデモページ

フラグメントを使うことで、レンダリング時には不要なラップ要素をなくすことができます。

---
const htmlString = '<p>HTMLコンテンツ</p>';
---
<Fragment set:html={htmlString} />

フラグメントのデモページ2

別の例として、以下のようなslotが2つあるコンポーネント(Sentence.astro)があるとします。

<div class="sentence">
  <slot name="sentence-head" />
  <div class="sentence-description">
    <slot name="sentence-description" />
  </div>
</div>

このコンポーネントを使う際、slotが複数あるのでそれぞれにslot属性を付与する形になりますが、ルートに複数の要素が入る場合には同様にフラグメントを使って設定できます。

---
import Sentence from '../../components/Sentence3.astro';
---
<Sentence>
  <h2 slot="sentence-head">見出し</h2>
  <Fragment slot="sentence-description">
    <p>説明文テキスト</p>
    <p>説明文テキスト</p>
  </Fragment>
</Sentence>

フラグメントのデモページ3