スロットのフォールバックコンテンツ
親から何も提供されない場合に、 内のデフォルトコンテンツをレンダリングします。
「スロットのフォールバックコンテンツ」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
スロット内のデフォルトコンテンツ
親コンポーネントから何も提供されなかった場合、<slot> タグ内に配置したコンテンツが表示されます。
<button>
<slot>Click me</slot>
</button>適切なデフォルト値
親コンポーネントの関与がなくても、多くの場合に機能する妥当なデフォルト値を用意してください。
名前付きスロットのフォールバック
名前付きスロットもフォールバックコンテンツに対応しています。
<slot name="title">Default Title</slot>スロットごとの戦略
スロットごとに異なるフォールバック戦略を設定できます。必要に応じて組み合わせてください。
埋められると置き換えられる
親コンポーネントがコンテンツを提供すると、フォールバックは完全に置き換えられます。
ヘッドレスコンポーネントに便利
ヘッドレス UI コンポーネントではフォールバックを最小限にすることが多く、利用側で完全にカスタマイズします。
重いフォールバックを避ける
デフォルトの内容は小さく保ってください。大きなフォールバックは、使われないコンポーネントを肥大化させます。
アイコンとラベル
アイコンボタンでよく使われます。アイコンが指定されていない場合に、汎用アイコンをフォールバックとして表示します。
条件との組み合わせ
フォールバックは、$$slots のチェックと組み合わせると高度なパターンにも対応できます。
マークアップは使えない？
フォールバックには、他のコンポーネントを含め、任意のマークアップを記述できます。
表示のテスト
フォールバックを確認するため、スロットコンテンツを何も指定せずにコンポーネントを必ずプレビューしてください。
確認問題
スロットのフォールバックはいつ表示されますか？
復習
<slot> タグの間にデフォルトコンテンツを配置すると、親コンポーネントがコンテンツを省略した場合のフォールバックを提供できます。
よくある質問
「スロットのフォールバックコンテンツ」レッスンは無料ですか？
はい。「スロットのフォールバックコンテンツ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「スロットのフォールバックコンテンツ」で何を学びますか？
親から何も提供されない場合に、 内のデフォルトコンテンツをレンダリングします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「スロットのフォールバックコンテンツ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コンテンツ投影のためのデフォルトスロット
- slot="name"による名前付きスロット
- スロットのフォールバックコンテンツ
- $$slotsによるスロットコンテンツの確認