Portalsを試してみた話 / I tried Portals

W3K Web Developers Meetup #1 登壇資料
Chromeに試験的に搭載されているPortalタグの機能についての紹介

元のスライドは動画埋め込みされていたのですが、SpeakerDeckには反映できなかったので出展元のサイトをご参照ください🙏

Transcript

14. <portal src='https://example.com'></portal> const portal = document.querySelector('portal'); portal.activate(); const portal = document.createElement('portal'); portal.src = 'https://example.com’; document.body.appendChild(portal);
15. const portal = document.querySelector('portal'); portal.activate(); window.addEventListener('portalactivate', event => { const portal = event.adoptPredecessor(); document.body.appendChild(portal); //戻るボタンを表示する実装 });
16. if ('HTMLPortalElement' in window) { // Portalを使った処理 } else { // Portalを使わない処理 } if (window.portalHost) { // Portalとして埋め込まれたときのレイアウトに変更するコード } /* iframeをタグ内に記述しておけば、portalタグを認識できないブラウザの場合にfallbackできる */ <portal src='https://example.com'> <iframe src='https://example.com'> </iframe> </portal>