English 中文 العربية 日本語 Português

<slot>: SLOT 要素

最終更新：2026-10-13

<slot>SLOT 要素

Web Components のシャドウ DOM に「スロット」を定義します。ホストコンテンツが投影されるプレースホルダーで、name で名前付き配信を指定できます。

カテゴリスクリプトと埋め込み
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </slot> タグ
ステータス標準

📝 構文

<slot name="title"></slot>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
nameSlot name; host content with slot="name" fills it; omitted is the default slot.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<slot> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： slot はシャドウ DOM / Web Components 内でのみ機能します。通常のページでは配信効果はありません。

❓ よくある質問

Qslot は何に使うものですか？
A<slot> は Web Components の「プレースホルダースロット」です。カスタムコンポーネントの Shadow DOM に穴を開け、コンポーネントを使う側がそこに本当の内容を流し込みます。<slot name='title'> は使用側の slot='title' の内容に対応し、内容とコンポーネント構造を分離します。
Qslot が埋められていないときは何が表示されますか？
Aスロット内のフォールバック内容が表示されます。<slot>デフォルトテキスト</slot> のようにタグの間に書いた内容は、使用側が対応する内容を提供しなかったときだけ描画されます。これでコンポーネントに適切なデフォルト状態を持たせられます。
Qslot と template は必ず一緒に使いますか？
A通常はセットです。<template> が Shadow DOM の構造を定義し、その中の slot が穴になります。ただし slot は、JS で作った shadow root の中でも使えます。逆に、template を単独で（クライアント側テンプレートとして）使うなら slot は不要です。両者は Web Components の体系の中で役割の違うパートナーです。
<template> <script>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%