Introduce FrameElement.getElementById(id: string)

The `FrameElement.getElementById(id: string)` static method unifies the
internal logic to locate a `<turbo-frame>` element by its `[id]`, while
providing that consistent behavior to consumer applications.

Author: seanpdoyle

src/core/frames/frame_controller.js

@@ -432,7 +432,7 @@ export class FrameController {
 
   #findFrameElement(element, submitter) {
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
-    return getFrameElementById(id) ?? this.element
+    return FrameElement.getElementById(id) ?? this.element
   }
 
   async extractForeignFrameElement(container) {
@@ -476,7 +476,7 @@ export class FrameController {
     }
 
     if (id) {
-      const frameElement = getFrameElementById(id)
+      const frameElement = FrameElement.getElementById(id)
       if (frameElement) {
         return !frameElement.disabled
       }
@@ -564,15 +564,6 @@ export class FrameController {
   }
 }
 
-function getFrameElementById(id) {
-  if (id != null) {
-    const element = document.getElementById(id)
-    if (element instanceof FrameElement) {
-      return element
-    }
-  }
-}
-
 function activateElement(element, currentURL) {
   if (element) {
     const src = element.getAttribute("src")

src/core/frames/frame_redirector.js

@@ -76,8 +76,9 @@ export class FrameRedirector {
   #findFrameElement(element, submitter) {
     const id = submitter?.getAttribute("data-turbo-frame") || element.getAttribute("data-turbo-frame")
     if (id && id != "_top") {
-      const frame = this.element.querySelector(`#${id}:not([disabled])`)
-      if (frame instanceof FrameElement) {
+      const frame = FrameElement.getElementById(id)
+
+      if (frame && !frame.disabled && this.element.contains(frame)) {
         return frame
       }
     }

src/core/session.js

@@ -162,9 +162,9 @@ export class Session {
     const frameTarget = element.getAttribute("data-turbo-frame")
     const frame = frameTarget == "_top" ?
       null :
-      document.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame:not([disabled])")
+      FrameElement.getElementById(frameTarget) || findClosestRecursively(element, "turbo-frame")
 
-    if (isUnsafe || isStream || frame instanceof FrameElement) {
+    if (isUnsafe || isStream || (frame && !frame.disabled)) {
       return false
     } else {
       const location = new URL(element.href)

src/elements/frame_element.js

@@ -28,6 +28,21 @@ export class FrameElement extends HTMLElement {
     return ["disabled", "complete", "loading", "src"]
   }
 
+  /**
+   * Returns the `<turbo-frame>` element located by its `[id]` attribute.
+   * Returns `null` when there is not element with a matching `[id]`, or when
+   * the element with a matching `[id]` is not a `<turbo-frame>`.
+   */
+  static getElementById(id) {
+    if (id) {
+      const element = document.getElementById(id)
+
+      if (element instanceof this) {
+        return element
+      }
+    }
+  }
+
   constructor() {
     super()
     this.delegate = new FrameElement.delegateConstructor(this)