From 65954576c6b0b20dc0a7e55de407deb7cff46421 Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Mon, 23 Dec 2024 15:33:18 +0100
Subject: [PATCH] use templates for portals

---
 assets/js/phoenix_live_view/constants.js   |   3 +-
 assets/js/phoenix_live_view/dom.js         |  42 +++---
 assets/js/phoenix_live_view/dom_patch.js   |  85 ++++++++----
 assets/js/phoenix_live_view/live_socket.js |   3 +-
 assets/js/phoenix_live_view/rendered.js    |   3 +-
 assets/js/phoenix_live_view/view.js        |  59 +++++---
 assets/test/dom_test.js                    |  36 +++--
 assets/test/integration/event_test.js      |   2 +-
 assets/test/rendered_test.js               |   4 +-
 assets/test/view_test.js                   |   6 +-
 lib/phoenix_live_view/tag_engine.ex        |  20 ++-
 test/e2e/support/issues/issue_3496.ex      |   2 -
 test/e2e/support/navigation.ex             |   5 +-
 test/e2e/support/portal.ex                 | 154 +++++++++++++++++----
 test/e2e/test_helper.exs                   |  11 +-
 test/e2e/tests/portal.spec.js              |  28 ++--
 16 files changed, 321 insertions(+), 142 deletions(-)

diff --git a/assets/js/phoenix_live_view/constants.js b/assets/js/phoenix_live_view/constants.js
index e2ee897379..728ed62bca 100644
--- a/assets/js/phoenix_live_view/constants.js
+++ b/assets/js/phoenix_live_view/constants.js
@@ -9,6 +9,7 @@ export const PHX_EVENT_CLASSES = [
   "phx-hook-loading"
 ]
 export const PHX_COMPONENT = "data-phx-component"
+export const PHX_VIEW_REF = "data-phx-view"
 export const PHX_LIVE_LINK = "data-phx-link"
 export const PHX_TRACK_STATIC = "track-static"
 export const PHX_LINK_STATE = "data-phx-link-state"
@@ -55,7 +56,7 @@ export const PHX_UPDATE = "update"
 export const PHX_STREAM = "stream"
 export const PHX_STREAM_REF = "data-phx-stream"
 export const PHX_PORTAL = "portal"
-export const PHX_PORTAL_REF = "data-phx-portal"
+export const PHX_TELEPORTED_REF = "data-phx-teleported"
 export const PHX_KEY = "key"
 export const PHX_PRIVATE = "phxPrivate"
 export const PHX_AUTO_RECOVER = "auto-recover"
diff --git a/assets/js/phoenix_live_view/dom.js b/assets/js/phoenix_live_view/dom.js
index 478a844581..160dbfef08 100644
--- a/assets/js/phoenix_live_view/dom.js
+++ b/assets/js/phoenix_live_view/dom.js
@@ -4,6 +4,8 @@ import {
   DEBOUNCE_TRIGGER,
   FOCUSABLE_INPUTS,
   PHX_COMPONENT,
+  PHX_VIEW_REF,
+  PHX_TELEPORTED_REF,
   PHX_HAS_FOCUSED,
   PHX_HAS_SUBMITTED,
   PHX_MAIN,
@@ -55,8 +57,8 @@ let DOM = {
     return this.all(node, `input[type="file"][${PHX_UPLOAD_REF}]`).concat(inputsOutsideForm)
   },
 
-  findComponentNodeList(node, cid){
-    return this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node)
+  findComponentNodeList(viewId, cid, doc=document){
+    return this.all(doc, `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}="${cid}"]`)
   },
 
   isPhxDestroyed(node){
@@ -136,7 +138,7 @@ let DOM = {
     return this.all(el, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}="${parentId}"]`)
   },
 
-  findExistingParentCIDs(node, cids){
+  findExistingParentCIDs(viewId, cids){
     // we only want to find parents that exist on the page
     // if a cid is not on the page, the only way it can be added back to the page
     // is if a parent adds it back, therefore if a cid does not exist on the page,
@@ -146,7 +148,7 @@ let DOM = {
     let childrenCids = new Set()
 
     cids.forEach(cid => {
-      this.filterWithinSameLiveView(this.all(node, `[${PHX_COMPONENT}="${cid}"]`), node).forEach(parent => {
+      this.all(document, `[${PHX_VIEW_REF}="${viewId}"][${PHX_COMPONENT}="${cid}"]`).forEach(parent => {
         parentCids.add(cid)
         this.all(parent, `[${PHX_COMPONENT}]`)
           .map(el => parseInt(el.getAttribute(PHX_COMPONENT)))
@@ -159,21 +161,6 @@ let DOM = {
     return parentCids
   },
 
-  filterWithinSameLiveView(nodes, parent){
-    if(parent.querySelector(PHX_VIEW_SELECTOR)){
-      return nodes.filter(el => this.withinSameLiveView(el, parent))
-    } else {
-      return nodes
-    }
-  },
-
-  withinSameLiveView(node, parent){
-    while(node = node.parentNode){
-      if(node.isSameNode(parent)){ return true }
-      if(node.getAttribute(PHX_SESSION) !== null){ return false }
-    }
-  },
-
   private(el, key){ return el[PHX_PRIVATE] && el[PHX_PRIVATE][key] },
 
   deletePrivate(el, key){ el[PHX_PRIVATE] && delete (el[PHX_PRIVATE][key]) },
@@ -368,6 +355,23 @@ let DOM = {
     return this.isPhxChild(el) ? el : this.all(el, `[${PHX_PARENT_ID}]`)[0]
   },
 
+  isPortalTemplate(el, phxPortal){
+    return el.tagName === "TEMPLATE" && el.hasAttribute(phxPortal)
+  },
+
+  closestViewEl(el){
+    // find the closest portal or view element, whichever comes first
+    const portalOrViewEl = el.closest(`[${PHX_TELEPORTED_REF}],${PHX_VIEW_SELECTOR}`)
+    if(!portalOrViewEl){ return null }
+    if(portalOrViewEl.getAttribute(PHX_TELEPORTED_REF)){
+      // PHX_TELEPORTED_REF is set to the id of the view that owns the portal element
+      return this.byId(portalOrViewEl.getAttribute(PHX_TELEPORTED_REF))
+    } else if(portalOrViewEl.getAttribute(PHX_SESSION)){
+      return portalOrViewEl
+    }
+    return null
+  },
+
   dispatchEvent(target, name, opts = {}){
     let defaultBubble = true
     let isUploadTarget = target.nodeName === "INPUT" && target.type === "file"
diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js
index bf14820fda..8b95243b49 100644
--- a/assets/js/phoenix_live_view/dom_patch.js
+++ b/assets/js/phoenix_live_view/dom_patch.js
@@ -15,7 +15,7 @@ import {
   PHX_VIEWPORT_TOP,
   PHX_VIEWPORT_BOTTOM,
   PHX_PORTAL,
-  PHX_PORTAL_REF
+  PHX_TELEPORTED_REF
 } from "./constants"
 
 import {
@@ -105,6 +105,11 @@ export default class DOMPatch {
     let updates = []
     let appendPrependUpdates = []
 
+    // as the portal target itself could be at the end of the DOM,
+    // it may not be present while morphing previous parts;
+    // therefore we apply all teleports after the morphing is done+
+    let portalCallbacks = []
+
     let externalFormTriggered = null
 
     function morph(targetContainer, source, withChildren=false){
@@ -126,18 +131,7 @@ export default class DOMPatch {
         // tell morphdom how to add a child
         addChild: (parent, child) => {
           let {ref, streamAt} = this.getStreamInsert(child)
-          if(ref === undefined){
-            // phx-portal optimization
-            if(child.getAttribute && child.getAttribute(PHX_PORTAL_REF) !== null){
-              const targetId = child.getAttribute(PHX_PORTAL_REF)
-              const portalTarget = DOM.byId(targetId)
-              child.removeAttribute(this.portal)
-              if(portalTarget.contains(child)){ return }
-              return portalTarget.appendChild(child)
-            }
-            // no special handling, we just append it to the parent
-            return parent.appendChild(child)
-          }
+          if(ref === undefined){ return parent.appendChild(child) }
 
           this.setStreamRef(child, ref)
 
@@ -173,6 +167,10 @@ export default class DOMPatch {
         },
         onNodeAdded: (el) => {
           if(el.getAttribute){ this.maybeReOrderStream(el, true) }
+          // phx-portal handling
+          if(DOM.isPortalTemplate(el, this.portal)){
+            portalCallbacks.push(() => this.teleport(el, morph))
+          }
 
           // hack to fix Safari handling of img srcset and video tags
           if(el instanceof HTMLImageElement && el.srcset){
@@ -197,8 +195,18 @@ export default class DOMPatch {
             DOM.isPhxUpdate(el.parentElement, phxUpdate, [PHX_STREAM, "append", "prepend"])){
             return false
           }
+          // don't remove teleported elements
+          if(el.getAttribute && el.getAttribute(PHX_TELEPORTED_REF)){ return false }
           if(this.maybePendingRemove(el)){ return false }
           if(this.skipCIDSibling(el)){ return false }
+          if(DOM.isPortalTemplate(el, this.portal)){
+            // if the portal template itself is removed, remove the teleported element as well
+            const teleportedEl = DOM.byId(el.content.firstElementChild.id)
+            if(teleportedEl){
+              teleportedEl.remove()
+              morphCallbacks.onNodeDiscarded(teleportedEl)
+            }
+          }
 
           return true
         },
@@ -281,21 +289,9 @@ export default class DOMPatch {
           DOM.copyPrivates(toEl, fromEl)
 
           // phx-portal handling
-          if(fromEl.hasAttribute(this.portal) || toEl.hasAttribute(this.portal)){
-            const targetId = toEl.getAttribute(this.portal)
-            const portalTarget = DOM.byId(targetId)
-            toEl.removeAttribute(this.portal)
-            toEl.setAttribute(PHX_PORTAL_REF, targetId)
-            const existing = document.getElementById(fromEl.id)
-            // if the child is already a descendent of the portal,
-            // keep it as is, to prevent unnecessary DOM operations
-            if(existing && portalTarget.contains(existing)){
-              return existing
-            } else {
-              // appendChild will move the element to the portal
-              portalTarget.appendChild(fromEl)
-              return fromEl
-            }
+          if(DOM.isPortalTemplate(toEl, this.portal)){
+            portalCallbacks.push(() => this.teleport(toEl, morph))
+            return false
           }
 
           // skip patching focused inputs unless focus is a select that has changed options
@@ -358,6 +354,8 @@ export default class DOMPatch {
       }
 
       morph.call(this, targetContainer, html)
+      // normal patch complete, teleport elements now
+      portalCallbacks.forEach(callback => callback())
     })
 
     if(liveSocket.isDebugEnabled()){
@@ -513,7 +511,7 @@ export default class DOMPatch {
 
   targetCIDContainer(html){
     if(!this.isCIDPatch()){ return }
-    let [first, ...rest] = DOM.findComponentNodeList(this.container, this.targetCID)
+    let [first, ...rest] = DOM.findComponentNodeList(this.view.id, this.targetCID)
     if(rest.length === 0 && DOM.childNodeLength(html) === 1){
       return first
     } else {
@@ -522,4 +520,33 @@ export default class DOMPatch {
   }
 
   indexOf(parent, child){ return Array.from(parent.children).indexOf(child) }
+
+  teleport(el, morph){
+    const targetId = el.getAttribute(this.portal)
+    const portalContainer = DOM.byId(targetId)
+    // phx-portal templates must have a single root element, so we assume this to be
+    // the case here
+    const toTeleport = el.content.firstElementChild
+    // the PHX_SKIP optimization can also apply inside of the <template> elements
+    if(this.skipCIDSibling(toTeleport)){ return }
+    if(!toTeleport?.id){ throw new Error("phx-portal template must have a single root element with ID!") }
+    const existing = document.getElementById(toTeleport.id)
+    let portalTarget
+    if(existing){
+      // we already teleported in a previous patch
+      if(!portalContainer.contains(existing)){ throw new Error(`expected ${id} to be a child of ${targetId}`) }
+      portalTarget = existing
+    } else {
+      // create empty target and morph it recursively
+      portalTarget = document.createElement(toTeleport.tagName)
+      portalContainer.appendChild(portalTarget)
+    }
+    morph.call(this, portalTarget, toTeleport, true)
+    // mark the target as teleported
+    portalTarget.setAttribute(PHX_TELEPORTED_REF, this.view.id)
+    // store a reference to the teleported element in the view
+    // to cleanup when the view is destroyed, in case the portal target
+    // is outside the view itself
+    this.view.pushPortalElement(toTeleport.id)
+  }
 }
diff --git a/assets/js/phoenix_live_view/live_socket.js b/assets/js/phoenix_live_view/live_socket.js
index f09cb3b155..f8570dfbeb 100644
--- a/assets/js/phoenix_live_view/live_socket.js
+++ b/assets/js/phoenix_live_view/live_socket.js
@@ -455,7 +455,8 @@ export default class LiveSocket {
   }
 
   owner(childEl, callback){
-    let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), el => this.getViewByEl(el)) || this.main
+    const viewEl = DOM.closestViewEl(childEl)
+    const view = viewEl ? this.getViewByEl(viewEl) : this.main
     return view && callback ? callback(view) : view
   }
 
diff --git a/assets/js/phoenix_live_view/rendered.js b/assets/js/phoenix_live_view/rendered.js
index 3af461634f..1f0fc75eb9 100644
--- a/assets/js/phoenix_live_view/rendered.js
+++ b/assets/js/phoenix_live_view/rendered.js
@@ -4,6 +4,7 @@ import {
   TEMPLATES,
   EVENTS,
   PHX_COMPONENT,
+  PHX_VIEW_REF,
   PHX_SKIP,
   PHX_MAGIC_ID,
   REPLY,
@@ -382,7 +383,7 @@ export default class Rendered {
 
   recursiveCIDToString(components, cid, onlyCids){
     let component = components[cid] || logError(`no component for CID ${cid}`, components)
-    let attrs = {[PHX_COMPONENT]: cid}
+    let attrs = {[PHX_COMPONENT]: cid, [PHX_VIEW_REF]: this.viewId}
     let skip = onlyCids && !onlyCids.has(cid)
     // Two optimization paths apply here:
     //
diff --git a/assets/js/phoenix_live_view/view.js b/assets/js/phoenix_live_view/view.js
index 7670e3c42d..996dabc96a 100644
--- a/assets/js/phoenix_live_view/view.js
+++ b/assets/js/phoenix_live_view/view.js
@@ -169,6 +169,7 @@ export default class View {
         flash: this.flash,
       }
     })
+    this.portalElementIds = []
   }
 
   setHref(href){ this.href = href }
@@ -206,6 +207,7 @@ export default class View {
 
   destroy(callback = function (){ }){
     this.destroyAllChildren()
+    this.destroyPortalElements()
     this.destroyed = true
     delete this.root.children[this.id]
     if(this.parent){ delete this.root.children[this.parent.id][this.id] }
@@ -275,7 +277,7 @@ export default class View {
   //  * a CID (Component ID), then we first search the component's element in the DOM
   //  * a selector, then we search the selector in the DOM and call the callback
   //    for each element found with the corresponding owner view
-  withinTargets(phxTarget, callback, dom = document, viewEl){
+  withinTargets(phxTarget, callback, dom = document){
     // in the form recovery case we search in a template fragment instead of
     // the real dom, therefore we optionally pass dom and viewEl
 
@@ -284,7 +286,7 @@ export default class View {
     }
 
     if(isCid(phxTarget)){
-      let targets = DOM.findComponentNodeList(viewEl || this.el, phxTarget)
+      let targets = DOM.findComponentNodeList(this.id, phxTarget, dom)
       if(targets.length === 0){
         logError(`no component found matching phx-target of ${phxTarget}`)
       } else {
@@ -390,24 +392,24 @@ export default class View {
   // by owner to ensure we aren't duplicating hooks across disconnect
   // and connected states. This also handles cases where hooks exist
   // in a root layout with a LV in the body
-  execNewMounted(parent = this.el){
+  execNewMounted(parent=document){
     let phxViewportTop = this.binding(PHX_VIEWPORT_TOP)
     let phxViewportBottom = this.binding(PHX_VIEWPORT_BOTTOM)
-    DOM.all(parent, `[${phxViewportTop}], [${phxViewportBottom}]`, hookEl => {
-      if(this.ownsElement(hookEl)){
-        DOM.maintainPrivateHooks(hookEl, hookEl, phxViewportTop, phxViewportBottom)
-        this.maybeAddNewHook(hookEl)
-      }
+    this.all(parent, `[${phxViewportTop}], [${phxViewportBottom}]`, hookEl => {
+      DOM.maintainPrivateHooks(hookEl, hookEl, phxViewportTop, phxViewportBottom)
+      this.maybeAddNewHook(hookEl)
     })
-    DOM.all(parent, `[${this.binding(PHX_HOOK)}], [data-phx-${PHX_HOOK}]`, hookEl => {
-      if(this.ownsElement(hookEl)){
-        this.maybeAddNewHook(hookEl)
-      }
+    this.all(parent, `[${this.binding(PHX_HOOK)}], [data-phx-${PHX_HOOK}]`, hookEl => {
+      this.maybeAddNewHook(hookEl)
     })
-    DOM.all(parent, `[${this.binding(PHX_MOUNTED)}]`, el => {
-      if(this.ownsElement(el)){
-        this.maybeMounted(el)
-      }
+    this.all(parent, `[${this.binding(PHX_MOUNTED)}]`, el => {
+      this.maybeMounted(el)
+    })
+  }
+
+  all(parent, selector, callback){
+    DOM.all(parent, selector, el => {
+      if(this.ownsElement(el)){ callback(el) }
     })
   }
 
@@ -524,7 +526,7 @@ export default class View {
   }
 
   joinNewChildren(){
-    DOM.findPhxChildren(this.el, this.id).forEach(el => this.joinChild(el))
+    DOM.findPhxChildren(document, this.id).forEach(el => this.joinChild(el))
   }
 
   maybeRecoverForms(html, callback){
@@ -655,7 +657,7 @@ export default class View {
     // Otherwise, patch entire LV container.
     if(this.rendered.isComponentOnlyDiff(diff)){
       this.liveSocket.time("component patch complete", () => {
-        let parentCids = DOM.findExistingParentCIDs(this.el, this.rendered.componentCIDs(diff))
+        let parentCids = DOM.findExistingParentCIDs(this.id, this.rendered.componentCIDs(diff))
         parentCids.forEach(parentCID => {
           if(this.componentPatch(this.rendered.getComponent(diff, parentCID), parentCID)){ phxChildrenAdded = true }
         })
@@ -814,6 +816,7 @@ export default class View {
   }
 
   onJoinError(resp){
+    debugger
     if(resp.reason === "reload"){
       this.log("error", () => [`failed mount with ${resp.status}. Falling back to page reload`, resp])
       this.onRedirect({to: this.root.href, reloadToken: resp.token})
@@ -1382,7 +1385,7 @@ export default class View {
 
   targetCtxElement(targetCtx){
     if(isCid(targetCtx)){
-      let [target] = DOM.findComponentNodeList(this.el, targetCtx)
+      let [target] = DOM.findComponentNodeList(this.id, targetCtx)
       return target
     } else if(targetCtx){
       return targetCtx
@@ -1417,7 +1420,7 @@ export default class View {
         pending--
         if(pending === 0){ callback() }
       })
-    }, templateDom, templateDom)
+    }, templateDom)
   }
 
   pushLinkPatch(e, href, targetEl, callback){
@@ -1465,7 +1468,7 @@ export default class View {
 
   maybePushComponentsDestroyed(destroyedCIDs){
     let willDestroyCIDs = destroyedCIDs.filter(cid => {
-      return DOM.findComponentNodeList(this.el, cid).length === 0
+      return DOM.findComponentNodeList(this.id, cid).length === 0
     })
 
     if(willDestroyCIDs.length > 0){
@@ -1480,7 +1483,7 @@ export default class View {
           // See if any of the cids we wanted to destroy were added back,
           // if they were added back, we don't actually destroy them.
           let completelyDestroyCIDs = willDestroyCIDs.filter(cid => {
-            return DOM.findComponentNodeList(this.el, cid).length === 0
+            return DOM.findComponentNodeList(this.id, cid).length === 0
           })
 
           if(completelyDestroyCIDs.length > 0){
@@ -1494,7 +1497,7 @@ export default class View {
   }
 
   ownsElement(el){
-    let parentViewEl = el.closest(PHX_VIEW_SELECTOR)
+    let parentViewEl = DOM.closestViewEl(el)
     return el.getAttribute(PHX_PARENT_ID) === this.id ||
       (parentViewEl && parentViewEl.id === this.id) ||
       (!parentViewEl && this.isDead)
@@ -1511,4 +1514,14 @@ export default class View {
   }
 
   binding(kind){ return this.liveSocket.binding(kind) }
+
+  // phx-portal
+  pushPortalElement(id){ this.portalElementIds.push(id) }
+
+  destroyPortalElements(){
+    this.portalElementIds.forEach(id => {
+      const el = document.getElementById(id)
+      if(el){ el.remove()}
+    })
+  }
 }
diff --git a/assets/test/dom_test.js b/assets/test/dom_test.js
index 732ef85c1f..b6b49dd54b 100644
--- a/assets/test/dom_test.js
+++ b/assets/test/dom_test.js
@@ -135,7 +135,7 @@ describe("DOM", () => {
   describe("findExistingParentCIDs", () => {
     test("returns only parent cids", () => {
       let view = tag("div", {}, `
-        <div data-phx-main="true"
+        <div id="foo" data-phx-main="true"
             data-phx-session="123"
             data-phx-static="456"
             id="phx-123"
@@ -145,35 +145,41 @@ describe("DOM", () => {
       `)
       document.body.appendChild(view)
 
-      view.appendChild(tag("div", {"data-phx-component": 1}, `
-        <div data-phx-component="2"></div>
+      view.appendChild(tag("div", {"data-phx-component": 1, "data-phx-view": "foo"}, `
+        <div data-phx-component="2" data-phx-view="foo"></div>
       `))
-      expect(DOM.findExistingParentCIDs(view, [1, 2])).toEqual(new Set([1]))
+      expect(DOM.findExistingParentCIDs("foo", [1, 2])).toEqual(new Set([1]))
 
-      view.appendChild(tag("div", {"data-phx-component": 1}, `
-        <div data-phx-component="2">
-          <div data-phx-component="3"></div>
+      view.appendChild(tag("div", {"data-phx-component": 1, "data-phx-view": "foo"}, `
+        <div data-phx-component="2" data-phx-view="foo">
+          <div data-phx-component="3" data-phx-view="foo"></div>
         </div>
       `))
-      expect(DOM.findExistingParentCIDs(view, [1, 2, 3])).toEqual(new Set([1]))
+      expect(DOM.findExistingParentCIDs("foo", [1, 2, 3])).toEqual(new Set([1]))
     })
   })
 
   describe("findComponentNodeList", () => {
     test("returns nodes with cid ID (except indirect children)", () => {
-      let component1 = tag("div", {"data-phx-component": 0}, "Hello")
-      let component2 = tag("div", {"data-phx-component": 0}, "World")
+      const view = tag("div", {"id": "foo"}, "")
+      let component1 = tag("div", {"data-phx-component": 0, "data-phx-view": "foo"}, "Hello")
+      let component2 = tag("div", {"data-phx-component": 0, "data-phx-view": "foo"}, "World")
       let component3 = tag("div", {"data-phx-session": "123"}, `
-        <div data-phx-component="0"></div>
+        <div data-phx-component="0" data-phx-view="123"></div>
       `)
-      document.body.appendChild(component1)
-      document.body.appendChild(component2)
-      document.body.appendChild(component3)
+      document.body.appendChild(view)
+      view.appendChild(component1)
+      view.appendChild(component2)
+      view.appendChild(component3)
 
-      expect(DOM.findComponentNodeList(document, 0)).toEqual([component1, component2])
+      expect(DOM.findComponentNodeList("foo", 0, document)).toEqual([component1, component2])
     })
 
     test("returns empty list with no matching cid", () => {
+      const view = tag("div", {"id": "foo"}, "")
+      let component1 = tag("div", {"data-phx-component": 0, "data-phx-view": "foo"}, "Hello")
+      document.body.appendChild(view)
+      view.appendChild(component1)
       expect(DOM.findComponentNodeList(document, 123)).toEqual([])
     })
   })
diff --git a/assets/test/integration/event_test.js b/assets/test/integration/event_test.js
index 981b69116b..8c2e323eb4 100644
--- a/assets/test/integration/event_test.js
+++ b/assets/test/integration/event_test.js
@@ -12,7 +12,7 @@ let prepareLiveViewDOM = (document, rootId) => {
     <div data-phx-session="abc123"
          data-phx-root-id="${rootId}"
          id="${rootId}">
-      <div class="form-wrapper" data-phx-component="2">
+      <div class="form-wrapper" data-phx-component="2" data-phx-view="root">
         <form id="form" phx-change="validate" phx-target="2">
           <label for="first_name">First Name</label>
           <input id="first_name" value="" name="user[first_name]" />
diff --git a/assets/test/rendered_test.js b/assets/test/rendered_test.js
index 59d64ad688..832ed22f21 100644
--- a/assets/test/rendered_test.js
+++ b/assets/test/rendered_test.js
@@ -234,12 +234,12 @@ describe("Rendered", () => {
         `<div data-phx-id="m1-123">
   <p>
     foo
-    <span>0: <b data-phx-id="c1-123" data-phx-component="1">FROM index_1 world</b></span><span>1: <b data-phx-id="c2-123" data-phx-component="2">FROM index_2 world</b></span>
+    <span>0: <b data-phx-id="c1-123" data-phx-component="1" data-phx-view="123">FROM index_1 world</b></span><span>1: <b data-phx-id="c2-123" data-phx-component="2" data-phx-view="123">FROM index_2 world</b></span>
   </p>
 
   <p>
     bar
-    <span>0: <b data-phx-id="c3-123" data-phx-component="3">FROM index_1 world</b></span><span>1: <b data-phx-id="c4-123" data-phx-component="4">FROM index_2 world</b></span>
+    <span>0: <b data-phx-id="c3-123" data-phx-component="3" data-phx-view="123">FROM index_1 world</b></span><span>1: <b data-phx-id="c4-123" data-phx-component="4" data-phx-view="123">FROM index_2 world</b></span>
   </p>
 </div>`.trim())
     })
diff --git a/assets/test/view_test.js b/assets/test/view_test.js
index dd1ee11445..2635deacc0 100644
--- a/assets/test/view_test.js
+++ b/assets/test/view_test.js
@@ -1167,10 +1167,10 @@ describe("View + Component", function(){
     }
 
     view.onJoin({rendered: joinDiff, liveview_version})
-    expect(view.el.innerHTML.trim()).toBe("<div data-phx-id=\"c0-container\" data-phx-component=\"0\" phx-click=\"show-rect\">Menu</div>\n<h2>2</h2>")
+    expect(view.el.innerHTML.trim()).toBe("<div data-phx-id=\"c0-container\" data-phx-component=\"0\" data-phx-view=\"container\" phx-click=\"show-rect\">Menu</div>\n<h2>2</h2>")
 
     view.update(updateDiff, [])
-    expect(view.el.innerHTML.trim().replace("\n", "")).toBe("<h1 data-phx-id=\"m1-container\">1</h1><div data-phx-id=\"c0-container\" data-phx-component=\"0\" phx-click=\"show-rect\">Menu</div>\n<h2>2</h2>")
+    expect(view.el.innerHTML.trim().replace("\n", "")).toBe("<h1 data-phx-id=\"m1-container\">1</h1><div data-phx-id=\"c0-container\" data-phx-component=\"0\" data-phx-view=\"container\" phx-click=\"show-rect\">Menu</div>\n<h2>2</h2>")
   })
 
   test("respects nested components", () => {
@@ -1190,7 +1190,7 @@ describe("View + Component", function(){
     }
 
     view.onJoin({rendered: joinDiff, liveview_version})
-    expect(view.el.innerHTML.trim()).toBe("<div data-phx-id=\"c0-container\" data-phx-component=\"0\">Hello</div><div data-phx-id=\"c1-container\" data-phx-component=\"1\">World</div>")
+    expect(view.el.innerHTML.trim()).toBe("<div data-phx-id=\"c0-container\" data-phx-component=\"0\" data-phx-view=\"container\">Hello</div><div data-phx-id=\"c1-container\" data-phx-component=\"1\" data-phx-view=\"container\">World</div>")
   })
 
   test("destroys children when they are removed by an update", () => {
diff --git a/lib/phoenix_live_view/tag_engine.ex b/lib/phoenix_live_view/tag_engine.ex
index 394737dadf..c38bd485db 100644
--- a/lib/phoenix_live_view/tag_engine.ex
+++ b/lib/phoenix_live_view/tag_engine.ex
@@ -1279,14 +1279,14 @@ defmodule Phoenix.LiveView.TagEngine do
 
   defp validate_tag_attrs!(_attrs, _meta, _state), do: :ok
 
-  # Check if `phx-update` or `phx-hook` is present in attrs and raises in case
+  # Check if `phx-update`, `phx-hook` or `phx-portal` is present in attrs and raises in case
   # there is no ID attribute set.
   defp validate_phx_attrs!(attrs, meta, state) do
     validate_phx_attrs!(attrs, meta, state, nil, false)
   end
 
   defp validate_phx_attrs!([], meta, state, attr, false)
-       when attr in ["phx-update", "phx-hook"] do
+       when attr in ["phx-update", "phx-hook", "phx-portal"] do
     message = "attribute \"#{attr}\" requires the \"id\" attribute to be set"
 
     raise_syntax_error!(message, meta, state)
@@ -1299,6 +1299,19 @@ defmodule Phoenix.LiveView.TagEngine do
   defp validate_phx_attrs!([{:root, _, _} | t], meta, state, attr, _id?),
     do: validate_phx_attrs!(t, meta, state, attr, true)
 
+  defp validate_phx_attrs!(
+         [{"phx-portal", _, _} | _t],
+         %{tag_name: tag_name} = meta,
+         state,
+         _attr,
+         _id?
+       )
+       when tag_name != "template" do
+    message = "\"phx-portal\" is only allowed on <template> tags"
+
+    raise_syntax_error!(message, meta, state)
+  end
+
   defp validate_phx_attrs!([{"id", _, _} | t], meta, state, attr, _id?),
     do: validate_phx_attrs!(t, meta, state, attr, true)
 
@@ -1338,6 +1351,9 @@ defmodule Phoenix.LiveView.TagEngine do
   defp validate_phx_attrs!([{"phx-hook", _, _} | t], meta, state, _attr, id?),
     do: validate_phx_attrs!(t, meta, state, "phx-hook", id?)
 
+  defp validate_phx_attrs!([{"phx-portal", _, _} | t], meta, state, _attr, id?),
+    do: validate_phx_attrs!(t, meta, state, "phx-portal", id?)
+
   defp validate_phx_attrs!([{special, value, attr_meta} | t], meta, state, attr, id?)
        when special in ~w(:if :for) do
     case value do
diff --git a/test/e2e/support/issues/issue_3496.ex b/test/e2e/support/issues/issue_3496.ex
index 1284f8f105..fa7be9be4a 100644
--- a/test/e2e/support/issues/issue_3496.ex
+++ b/test/e2e/support/issues/issue_3496.ex
@@ -70,8 +70,6 @@ end
 defmodule Phoenix.LiveViewTest.E2E.Issue3496.BLive do
   use Phoenix.LiveView
 
-  alias Phoenix.LiveView.JS
-
   def mount(_params, _session, socket) do
     {:ok, socket, layout: {Phoenix.LiveViewTest.E2E.Issue3496.ALive, :without_sticky}}
   end
diff --git a/test/e2e/support/navigation.ex b/test/e2e/support/navigation.ex
index d5680031fd..a8d7fd4ce9 100644
--- a/test/e2e/support/navigation.ex
+++ b/test/e2e/support/navigation.ex
@@ -178,10 +178,7 @@ defmodule Phoenix.LiveViewTest.E2E.Navigation.Dead do
   import Phoenix.Component, only: [sigil_H: 2]
 
   def index(conn, _params) do
-    assigns = %{}
-
-    conn
-    |> render(:index)
+    render(conn, :index)
   end
 end
 
diff --git a/test/e2e/support/portal.ex b/test/e2e/support/portal.ex
index eee4b590aa..3e5bb8bc96 100644
--- a/test/e2e/support/portal.ex
+++ b/test/e2e/support/portal.ex
@@ -3,26 +3,38 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
 
   alias Phoenix.LiveView.JS
 
+  def render("root.html", assigns) do
+    ~H"""
+    <!DOCTYPE html>
+    <head>
+      <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
+      <script src="https://cdn.tailwindcss.com/3.4.3">
+      </script>
+      <script src="/assets/phoenix/phoenix.min.js">
+      </script>
+      <script type="module">
+        import {LiveSocket} from "/assets/phoenix_live_view/phoenix_live_view.esm.js"
+        let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+        let liveSocket = new LiveSocket("/live", window.Phoenix.Socket, {params: {_csrf_token: csrfToken}})
+        liveSocket.connect()
+        window.liveSocket = liveSocket
+      </script>
+    </head>
+
+    <body>
+      <main style="flex: 1; padding: 2rem;">
+        {@inner_content}
+      </main>
+      <div id="root-portal"></div>
+    </body>
+    """
+  end
+
   def render("live.html", assigns) do
     ~H"""
-    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
-    <script src="https://cdn.tailwindcss.com/3.4.3">
-    </script>
-    <script src="/assets/phoenix/phoenix.min.js">
-    </script>
-    <script type="module">
-      import {LiveSocket} from "/assets/phoenix_live_view/phoenix_live_view.esm.js"
-      let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
-      let liveSocket = new LiveSocket("/live", window.Phoenix.Socket, {params: {_csrf_token: csrfToken}})
-      liveSocket.connect()
-      window.liveSocket = liveSocket
-    </script>
+    {@inner_content}
 
     <div id="portal-target"></div>
-
-    <main style="margin-left: 22rem; flex: 1; padding: 2rem;">
-      <%= @inner_content %>
-    </main>
     """
   end
 
@@ -36,6 +48,7 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
     socket
     |> assign(:param_current, nil)
     |> assign(:count, 0)
+    |> assign(:render_modal, true)
     |> then(&{:ok, &1, layout: {__MODULE__, :live}})
   end
 
@@ -59,32 +72,45 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
     {:noreply, assign(socket, :count, socket.assigns.count + 1)}
   end
 
+  def handle_event("toggle_modal", _params, socket) do
+    {:noreply, assign(socket, :render_modal, !socket.assigns.render_modal)}
+  end
+
   @impl Phoenix.LiveView
   def render(assigns) do
     ~H"""
     <h1>Modal example</h1>
 
-    <p>Current param: <%= @param_current %></p>
+    <p>Current param: {@param_current}</p>
 
     <.button phx-click={JS.patch("/portal?param=#{@param_next}")}>Patch this LiveView</.button>
 
     <.button phx-click={show_modal("my-modal")}>Open modal</.button>
+    <.button phx-click="toggle_modal">Toggle modal render</.button>
     <.button phx-click={show_modal("my-modal-2")}>Open second modal</.button>
     <.button phx-click={JS.push("tick")}>Tick</.button>
 
-    <div id="portal-source" phx-portal="portal-target">
+    <.button phx-click={JS.navigate("/form")}>Live navigate</.button>
+
+    <template :if={@render_modal} id="portal-source" phx-portal="root-portal">
       <.modal id="my-modal">
         This is a modal.
-        <p>DOM patching works as expected: <%= @count %></p>
+        <p>DOM patching works as expected: {@count}</p>
         <.button phx-click={JS.patch("/portal?param=#{@param_next}")}>Patch this LiveView</.button>
       </.modal>
-    </div>
+    </template>
 
-    <div id="portal-source-2" phx-portal="portal-target">
+    <template id="portal-source-2" phx-portal="portal-target">
       <.modal id="my-modal-2">
         This is a second modal.
       </.modal>
-    </div>
+    </template>
+
+    <template id="portal-with-live-component" phx-portal="root-portal">
+      <.live_component module={Phoenix.LiveViewTest.E2E.PortalLive.LC} id="lc" />
+    </template>
+
+    {live_render(@socket, Phoenix.LiveViewTest.E2E.PortalLive.NestedLive, id: "nested")}
     """
   end
 
@@ -105,7 +131,7 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -153,7 +179,7 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
                 </button>
               </div>
               <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
               </div>
             </.focus_wrap>
           </div>
@@ -209,3 +235,83 @@ defmodule Phoenix.LiveViewTest.E2E.PortalLive do
     )
   end
 end
+
+defmodule Phoenix.LiveViewTest.E2E.PortalLive.NestedLive do
+  use Phoenix.LiveView
+
+  def handle_event("event", _params, socket) do
+    IO.puts("Nested LV got event!")
+    {:noreply, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="border border-orange-200">
+      <h1>Nested LiveView</h1>
+
+      <button phx-click="event">Toggle event in nested LV</button>
+
+      <template id="nested-tpl" phx-portal="portal-target">
+        <div id="button-from-nested-lv">
+          <button phx-click="event">Toggle event in nested LV (from teleported button)</button>
+        </div>
+      </template>
+
+      <template id="teleported-nested-lv" phx-portal="portal-target">
+        <div id="nested-lv-container">
+          {live_render(@socket, Phoenix.LiveViewTest.E2E.PortalLive.NestedTeleportedLive,
+            id: "nested-teleported"
+          )}
+        </div>
+      </template>
+    </div>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.PortalLive.NestedTeleportedLive do
+  use Phoenix.LiveView
+
+  def handle_event("event", _params, socket) do
+    IO.puts("Nested teleported LV got event!")
+    {:noreply, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="border border-green-200">
+      <h1>Nested teleport LiveView</h1>
+      <button phx-click="event">Toggle event in teleported LV</button>
+    </div>
+    """
+  end
+end
+
+defmodule Phoenix.LiveViewTest.E2E.PortalLive.LC do
+  use Phoenix.LiveComponent
+
+  def update(assigns, socket) do
+    {:ok, stream(socket, :items, [%{id: 1, name: "Item 1"}, %{id: 2, name: "Item 2"}])}
+  end
+
+  def handle_event("prepend", _params, socket) do
+    rand = 1000 + floor(:rand.uniform() * 1000)
+    {:noreply, stream_insert(socket, :items, %{id: rand, name: "Item #{rand}"}, at: 0)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div id="teleported-lc" class="border border-red-200">
+      <h1>LiveComponent</h1>
+
+      <ul id="stream-in-lc" phx-update="stream">
+        <li :for={{id, item} <- @streams.items} id={id}>
+          {item.name}
+        </li>
+      </ul>
+
+      <button phx-click="prepend" phx-target={@myself}>Prepend item</button>
+    </div>
+    """
+  end
+end
diff --git a/test/e2e/test_helper.exs b/test/e2e/test_helper.exs
index 3e1d35bba6..219be1c299 100644
--- a/test/e2e/test_helper.exs
+++ b/test/e2e/test_helper.exs
@@ -111,6 +111,10 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
     plug :put_root_layout, html: {Phoenix.LiveViewTest.E2E.Layout, :root}
   end
 
+  pipeline :portal_root do
+    plug :put_root_layout, html: {Phoenix.LiveViewTest.E2E.PortalLive, :root}
+  end
+
   live_session :default,
     layout: {Phoenix.LiveViewTest.E2E.Layout, :live},
     on_mount: {Phoenix.LiveViewTest.E2E.Hooks, :default} do
@@ -132,7 +136,12 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/form/stream", E2E.FormStreamLive
       live "/js", E2E.JsLive
       live "/select", E2E.SelectLive
-      live "/portal", E2E.PortalLive
+    end
+
+    scope "/portal", Phoenix.LiveViewTest do
+      pipe_through([:browser, :portal_root])
+
+      live "/", E2E.PortalLive
     end
 
     scope "/issues", Phoenix.LiveViewTest.E2E do
diff --git a/test/e2e/tests/portal.spec.js b/test/e2e/tests/portal.spec.js
index b1ee50249f..76869101f8 100644
--- a/test/e2e/tests/portal.spec.js
+++ b/test/e2e/tests/portal.spec.js
@@ -1,19 +1,19 @@
-const { test, expect } = require("../test-fixtures");
-const { syncLV, evalLV } = require("../utils");
+const {test, expect} = require("../test-fixtures")
+const {syncLV, evalLV} = require("../utils")
 
-test("renders modal inside portal location", async ({ page }) => {
-  await page.goto("/portal?tick=false");
-  await syncLV(page);
+test("renders modal inside portal location", async ({page}) => {
+  await page.goto("/portal?tick=false")
+  await syncLV(page)
 
-  await expect(page.locator("#my-modal")).toHaveCount(1);
-  await expect(page.locator("#my-modal-content")).not.toBeVisible();
+  await expect(page.locator("#my-modal")).toHaveCount(1)
+  await expect(page.locator("#my-modal-content")).toBeHidden()
   // no modal inside the main element (rendered in the layout)
-  await expect(page.locator("main #my-modal")).toHaveCount(0);
+  await expect(page.locator("main #my-modal")).toHaveCount(0)
 
-  await page.getByRole("button", { name: "Open modal" }).click();
-  await expect(page.locator("#my-modal-content")).toBeVisible();
+  await page.getByRole("button", {name: "Open modal"}).click()
+  await expect(page.locator("#my-modal-content")).toBeVisible()
 
-  await expect(page.locator("#my-modal-content")).toContainText("DOM patching works as expected: 0");
-  await evalLV(page, `send(self(), :tick)`);
-  await expect(page.locator("#my-modal-content")).toContainText("DOM patching works as expected: 1");
-});
+  await expect(page.locator("#my-modal-content")).toContainText("DOM patching works as expected: 0")
+  await evalLV(page, "send(self(), :tick)")
+  await expect(page.locator("#my-modal-content")).toContainText("DOM patching works as expected: 1")
+})