ep.51 Vue 3 Study『Teleport でキレイに解消するモーダルの z-index 問題』

このエピソードについて

LINE

@spring_raining が @potato4d に Vue 3 で追加される Teleport (Portal) について話を聴きました。

About Vue 3 Study
- 社内勉強会で開催している Vue 3 の勉強会企画
- RFC を一つずつ追っていく
- 今は Vuex, Vue Router の新バージョンのウォッチも継続中
Guest
- @potato4d
Teleport
- いわゆる “Portal” の機能の Vue.js 版
- 仮想 DOM 上の親子関係を飛び越えて、別の場所にある DOM に対して要素をマウントする機能
Portal の必要性と嬉しさ
- 実 DOM 操作する時代が終わった開発環境における z-index の取り扱いの悩みを解消
  - 頻出するのはモーダル
    - 子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる
    - しかしモーダルの呼び出し元は子孫の要素
    - ただの仮想 DOM の範囲では解決できない
  - Portal がない状態ではいびつな解消法になりがち
    - ライフサイクルフックで実 DOM に反映する
    - リアクティブなデータ共有や Vuex でフラグを管理し、Rootで持つ
  - Portal を使うとこういったいびつな構造を生むことなく解決できる
Vue.js の Teleport について
- Teleport の対象となるDOM要素を事前に用意する
- 転送したいコンポーネントを <Teleport> タグで囲い、 to でセレクタを指定する
他のフレームワークでの Portal
- React の Portal の話
  - 使い心地は少し異なるものの、Reactにも同様の機能がある https://ja.reactjs.org/docs/portals.html
  - Reactの className はDOM APIが由来 https://developer.mozilla.org/ja/docs/Web/API/Element/className
- Vue.js がなぜ Teleport の名称を採用したか
Vue 2.x の現場では PortalVue がおすすめ
- コアチームメンバーが開発した 2.x での Portal
- https://github.com/LinusBorg/portal-vue

採用について

使用素材・クレジット

BGM&SE