Astroで名前付きスロットが使えるのは、同系統のコンポーネント間だけ

---
import Layout from "...";
---

<Layout>
  <h2 slot="after-header">After header</h2>
  <h2>Default slot</h2>
  <h2 slot="after-footer">After footer</h2>
</Layout>

仕様らしい

🐛 BUG: Named Slots are not forwarded to Svelte Components · Issue #2238 · withastro/astro · GitHub

コンパイラの仕様なら仕方ないか・・とは思いつつ。

まとめると、

Where	Layout	Works?
.astro	.astro	Yes
.astro	.svelte/.vue	No
.svelte	.svelte	Yes
.vue	.vue	Yes

ってこと。

もちろん`.svelte`の中では、他のタイプのコンポーネントは読み込めない。

名前付きではないただのスロットなら使えるし、他のタイプ同士を混ぜ込むことすらできる。

https://docs.astro.build/en/core-concepts/framework-components/#nesting-framework-components

ワークアラウンド

幸い自分のケースは軽傷で、こんな風なコンポーネントを`.svelte`で作ってた。

<div class="layout">
  <div>
    <slot name="main" />
  </div>
  <div>
    <slot name="sub" />
  </div>
</div>

<style>
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
  }
</style>

というように、2カラムにしたいだけだった。
なので、名前付き`slot`を使わずに、単一の`slot`だけでもなんとかなった。

<div class="layout">
  <slot />
</div>

<style>
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
  }
</style>

使う側はこう。

<Layout>
  <Main />
  <Sub />
</Layout>

ただし、`Main`も`Sub`も単一の要素を返すという暗黙の前提が生まれてしまうけど・・・。

Render propsもダメ

`.astro`はJSXモドキなので、Propsでコンポーネントごと渡せばワンチャンあるか？！って思ったけど、ぜんぜんダメだった。

<Layout
  main={<Main />}
  sub={<Sub />}
/>

めちゃめちゃコンパイルエラーがでた。

おとなしくレイアウトは`.astro`でやれって話でした。