SVG ScreenshotでPortalsを試した
2019/5/29 時点のメモです 
最近話題のPortalsに触れておきたいという動機
何ができるのか全くわからないがtwitterでデモはよく見かけたので気になっていた
SVG Screenshotに無理やり組み込んでみる、
フラグ付きChrome Canaryでしか動かない
$ open -a "Google Chrome Canary" --args --enable-features=Portals
さらに chrome://flags/#enable-portals を有効化する
基本的な手順
jsCopied!
const portal = document.createElement('portal')portal.src = 'https://www.google.com'portal.activate()SVG画像内リンク (外部サイト) への遷移に使う？
用途としてなんか違う気がする
遷移先がsame originでなくてもいいのはおもしろい
Desktop PWAのなかでやったらどうなるのだろう
Portal内でpreloadしただけで、一回アクセスがあったとみなされる
SVG内のScrapboxページをプレビューしただけで、last visited順に影響が出た
左下から画面全体広がるアニメーションは独自にCSSで書いたもの
portal要素のサイズも位置も自由に表現できる
一覧から個別画面 (自サイト内) への遷移に使うのが一番しっくりくる
mouseenterのタイミングでportalを生成して、aタグかportalタグをクリックされたらactivate
Poratalから戻った時にscroll位置も保持されているかも？
いまはbrowser backできないbugがあるので試せないが
翌日
良い資料が公開されていた
/pastak-pub/はてなにおけるPortals
adoptPredecessor をまだ知らない 続き