<Teleport> 別の DOM 位置へテレポートする

最終更新：2026-10-22

は内容をページの別の場所（body など）へ描画します。モーダルやドロップダウンが親コンテナの overflow で切り取られたり、重なり順が制限されたりする問題を解決します。

📝 構文

<Teleport to="body">
  <div class="modal">モーダルの内容</div>
</Teleport>

props	to（CSS セレクターまたは要素）/ disabled（テレポートの無効化）

以下のコードを編集して結果を確認しましょう：

出力：

The modal mounts under body, escaping the #app container.

ℹ️ 補足 論理的には依然としてコンポーネントの子ノードです。props、イベント、provide / inject の関係は変わりません。

💡 ヒント body や専用のレイヤーコンテナへのテレポートを優先すると、親の overflow / z-index による干渉を避けられます。

ℹ️ 補足 複数の Teleport の目標順序は v-if で制御できます。disabled を使うと一時的にその場に描画されます。

Q モーダルが切り取られるのはなぜですか？

A 親コンテナに overflow:hidden があるか、transform が新しい重なりコンテキストを作っているためです。body へテレポートすれば回避できます。

Q イベントはまだコンポーネントツリーへバブルしますか？

A DOM イベントは実際の DOM に沿ってバブルしますが、Vue のコンポーネントイベントやリアクティブな関係は変わりません。

Q 指定したコンテナへ送れますか？

A 送れます。to="#modal-root" と書きます。対象の要素が先に存在することを確認してください。

Web-Tutorial 技術チーム

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