Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Susumu Nakamura

November 22, 2019
Tweet

More Decks by Susumu Nakamura

Other Decks in Programming

Transcript


  1. const portal = document.querySelector('portal');
    portal.activate();
    const portal = document.createElement('portal');
    portal.src = 'https://example.com’;
    document.body.appendChild(portal);

    View full-size slide

  2. const portal = document.querySelector('portal');
    portal.activate();
    window.addEventListener('portalactivate', event => {
    const portal = event.adoptPredecessor();
    document.body.appendChild(portal);
    //戻るボタンを表示する実装
    });

    View full-size slide

  3. if ('HTMLPortalElement' in window) {
    // Portalを使った処理
    } else {
    // Portalを使わない処理
    }
    if (window.portalHost) {
    // Portalとして埋め込まれたときのレイアウトに変更するコード
    }
    /* iframeをタグ内に記述しておけば、portalタグを認識できないブラウザの場合にfallbackできる */




    View full-size slide