Mix in Turbo Frames to built-in elements.

src/core/frames/frame_controller.ts

@@ -1,4 +1,4 @@
-import { FrameElement, FrameElementDelegate, FrameLoadingStyle } from "../../elements/frame_element"
+import { FrameElement, FrameElementDelegate, FrameLoadingStyle, isTurboFrameElement } from "../../elements/frame_element"
 import { FetchMethod, FetchRequest, FetchRequestDelegate, FetchRequestHeaders } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { AppearanceObserver, AppearanceObserverDelegate } from "../../observers/appearance_observer"
@@ -261,21 +261,21 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
     const id = CSS.escape(this.id)
 
     try {
-      if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+      if (element = activateElement(container.querySelector(`${this.element.selector}#${id}`), this.currentURL)) {
         return element
       }
 
-      if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+      if (element = activateElement(container.querySelector(`${this.element.selector}[src][recurse~=${id}]`), this.currentURL)) {
         await element.loaded
         return await this.extractForeignFrameElement(element)
       }
 
-      console.error(`Response has no matching <turbo-frame id="${id}"> element`)
+      console.error(`Response has no element matching ${this.element.selector}#${id}`)
     } catch (error) {
       console.error(error)
     }
 
-    return new FrameElement()
+    return new this.elementConstructor()
   }
 
   private shouldInterceptNavigation(element: Element, submitter?: Element) {
@@ -303,6 +303,10 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
     return true
   }
 
+  private get elementConstructor() {
+    return Object.getPrototypeOf(this.element).constructor
+  }
+
   // Computed properties
 
   get id() {
@@ -356,7 +360,7 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
 function getFrameElementById(id: string | null) {
   if (id != null) {
     const element = document.getElementById(id)
-    if (element instanceof FrameElement) {
+    if (isTurboFrameElement(element)) {
       return element
     }
   }
@@ -366,13 +370,13 @@ function activateElement(element: Element | null, currentURL?: string | null) {
   if (element) {
     const src = element.getAttribute("src")
     if (src != null && currentURL != null && urlsAreEqual(src, currentURL)) {
-      throw new Error(`Matching <turbo-frame id="${element.id}"> element has a source URL which references itself`)
+      throw new Error(`Matching <${element.tagName.toLowerCase()} id="${element.id}"> element has a source URL which references itself`)
     }
     if (element.ownerDocument !== document) {
       element = document.importNode(element, true)
     }
 
-    if (element instanceof FrameElement) {
+    if (isTurboFrameElement(element)) {
       element.connectedCallback()
       return element
     }

src/core/frames/frame_redirector.ts

@@ -1,5 +1,5 @@
 import { FormInterceptor, FormInterceptorDelegate } from "./form_interceptor"
-import { FrameElement } from "../../elements/frame_element"
+import { isTurboFrameElement } from "../../elements/frame_element"
 import { LinkInterceptor, LinkInterceptorDelegate } from "./link_interceptor"
 
 export class FrameRedirector implements LinkInterceptorDelegate, FormInterceptorDelegate {
@@ -49,14 +49,14 @@ export class FrameRedirector implements LinkInterceptorDelegate, FormInterceptor
 
   private shouldRedirect(element: Element, submitter?: HTMLElement) {
     const frame = this.findFrameElement(element, submitter)
-    return frame ? frame != element.closest("turbo-frame") : false
+    return frame ? frame != element.closest(`turbo-frame, [is^="turbo-frame-"]`) : false
   }
 
   private findFrameElement(element: Element, submitter?: HTMLElement) {
     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) {
+      if (isTurboFrameElement(frame)) {
         return frame
       }
     }

src/core/frames/link_interceptor.ts

@@ -55,6 +55,6 @@ export class LinkInterceptor {
         : target instanceof Node
         ? target.parentElement
           : null
-    return element && element.closest("turbo-frame, html") == this.element
+    return element && element.closest(`turbo-frame, [is^="turbo-frame-"], html`) == this.element
   }
 }

src/core/index.ts

@@ -101,3 +101,7 @@ export function setProgressBarDelay(delay: number) {
 export function setConfirmMethod(confirmMethod: (message: string, element: HTMLFormElement)=>boolean) {
   FormSubmission.confirmMethod = confirmMethod
 }
+
+export function defineCustomFrameElement(name: string) {
+  session.defineCustomFrameElement(name)
+}

src/core/session.ts

@@ -3,6 +3,7 @@ import { BrowserAdapter } from "./native/browser_adapter"
 import { CacheObserver } from "../observers/cache_observer"
 import { FormSubmitObserver, FormSubmitObserverDelegate } from "../observers/form_submit_observer"
 import { FrameRedirector } from "./frames/frame_redirector"
+import { defineCustomFrameElement } from "../elements"
 import { History, HistoryDelegate } from "./drive/history"
 import { LinkClickObserver, LinkClickObserverDelegate } from "../observers/link_click_observer"
 import { expandURL, locationIsVisitable, Locatable } from "./url"
@@ -102,6 +103,10 @@ export class Session implements FormSubmitObserverDelegate, HistoryDelegate, Lin
     this.progressBarDelay = delay
   }
 
+  defineCustomFrameElement(name: string) {
+    defineCustomFrameElement(name)
+  }
+
   get location() {
     return this.history.location
   }

src/elements/custom_frame_element.ts

@@ -0,0 +1,15 @@
+import { builtinTurboFrameElement } from "./frame_element"
+
+export function defineCustomFrameElement(name: string) {
+  customElements.define(`turbo-frame-${name}`, builtinTurboFrameElement(name), { extends: name })
+}
+
+defineCustomFrameElement("div")
+defineCustomFrameElement("article")
+defineCustomFrameElement("tbody")
+defineCustomFrameElement("header")
+defineCustomFrameElement("footer")
+defineCustomFrameElement("section")
+defineCustomFrameElement("aside")
+defineCustomFrameElement("main")
+defineCustomFrameElement("nav")

src/elements/frame_element.ts

@@ -2,6 +2,25 @@ import { FetchResponse } from "../http/fetch_response"
 
 export enum FrameLoadingStyle { eager = "eager", lazy = "lazy" }
 
+export interface FrameElement extends HTMLElement {
+  isTurboFrameElement: boolean
+  selector: string
+  delegate: FrameElementDelegate
+  loaded: Promise<FetchResponse | void>
+  src: string | null
+  disabled: boolean
+  loading: string
+  isActive: boolean
+  autoscroll: boolean
+  connectedCallback(): void
+  disconnectedCallback(): void
+  attributeChangedCallback(name: string): void
+}
+
+export namespace FrameElement {
+  export let delegateConstructor: new (element: FrameElement) => FrameElementDelegate
+}
+
 export interface FrameElementDelegate {
   connect(): void
   disconnect(): void
@@ -13,25 +32,9 @@ export interface FrameElementDelegate {
   isLoading: boolean
 }
 
-/**
- * Contains a fragment of HTML which is updated based on navigation within
- * it (e.g. via links or form submissions).
- *
- * @customElement turbo-frame
- * @example
- *   <turbo-frame id="messages">
- *     <a href="/messages/expanded">
- *       Show all expanded messages in this frame.
- *     </a>
- *
- *     <form action="/messages">
- *       Show response from this form within this frame.
- *     </form>
- *   </turbo-frame>
- */
-export class FrameElement extends HTMLElement {
-  static delegateConstructor: new (element: FrameElement) => FrameElementDelegate
-
+export function frameElementFactory(Base: new() => HTMLElement) {
+  return class extends Base implements FrameElement {
+    readonly isTurboFrameElement: boolean = true
     loaded: Promise<FetchResponse | void> = Promise.resolve()
     readonly delegate: FrameElementDelegate
 
@@ -41,6 +44,9 @@ export class FrameElement extends HTMLElement {
 
     constructor() {
       super()
+      if (!this.autonomous) {
+        this.setAttribute("is", this.isValue)
+      }
       this.delegate = new FrameElement.delegateConstructor(this)
     }
 
@@ -52,12 +58,6 @@ export class FrameElement extends HTMLElement {
       this.delegate.disconnect()
     }
 
-  reload() {
-    const { src } = this;
-    this.src = null;
-    this.src = src;
-  }
-
     attributeChangedCallback(name: string) {
       if (name == "loading") {
         this.delegate.loadingStyleChanged()
@@ -68,6 +68,28 @@ export class FrameElement extends HTMLElement {
       }
     }
 
+    reload() {
+      const { src } = this;
+      this.src = null;
+      this.src = src;
+    }
+
+    get selector(): string {
+      if (this.autonomous) {
+        return this.localName
+      } else {
+        return `${this.localName}[is="${this.isValue}"]`
+      }
+    }
+
+    get isValue(): string {
+      return `turbo-frame-${this.localName}`
+    }
+
+    get autonomous(): boolean {
+      return Base === HTMLElement
+    }
+
     /**
      * Gets the URL to lazily load source HTML from
      */
@@ -173,10 +195,22 @@ export class FrameElement extends HTMLElement {
       return this.ownerDocument?.documentElement?.hasAttribute("data-turbo-preview")
     }
   }
+}
 
 function frameLoadingStyleFromString(style: string) {
   switch (style.toLowerCase()) {
     case "lazy":  return FrameLoadingStyle.lazy
     default:      return FrameLoadingStyle.eager
   }
 }
+
+export function builtinTurboFrameElement(name: string) {
+  const baseElementConstructor = Object.getPrototypeOf(document.createElement(name)).constructor
+  return frameElementFactory(baseElementConstructor)
+}
+
+export function isTurboFrameElement(arg: any): arg is FrameElement {
+  return arg && arg.isTurboFrameElement && arg instanceof HTMLElement
+}
+
+export const TurboFrameElement = frameElementFactory(HTMLElement)

src/elements/index.ts

@@ -1,11 +1,12 @@
 import { FrameController } from "../core/frames/frame_controller"
-import { FrameElement } from "./frame_element"
+import { FrameElement, TurboFrameElement } from "./frame_element"
 import { StreamElement } from "./stream_element"
 
 FrameElement.delegateConstructor = FrameController
 
 export * from "./frame_element"
 export * from "./stream_element"
+export * from "./custom_frame_element"
 
-customElements.define("turbo-frame", FrameElement)
+customElements.define("turbo-frame", TurboFrameElement)
 customElements.define("turbo-stream", StreamElement)

src/tests/fixtures/frames.html

@@ -77,5 +77,14 @@ <h2>Frames: #nested-child</h2>
     <form data-turbo-frame="frame" method="get" action="/src/tests/fixtures/frames/frame.html">
       <input id="outer-frame-submit" type="submit" value="Outer form submit">
     </form>
+
+    <table>
+      <thead id="thead0">
+        <tr><th>table thead0</th></tr>
+      </thead>
+      <tbody id="tbody0" is="turbo-frame-tbody">
+        <tr><td><a href="/src/tests/fixtures/frames/table.html">Set table</a></td></tr>
+      </tbody>
+    </table>
 </body>
 </html>

src/tests/fixtures/frames/table.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Frame</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+  </head>
+  <body>
+    <table>
+      <tbody id="tbody0" is="turbo-frame-tbody">
+        <tr><td>Table service</td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>

src/tests/functional/frame_tests.ts

@@ -277,6 +277,17 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.ok(await this.nextEventOnTarget("frame", "turbo:before-fetch-response"))
   }
 
+  async "test loading a tbody element"() {
+    await this.clickSelector("#tbody0 a")
+    await this.nextBeat
+
+    const contentsTd = await this.querySelector("#tbody0 td")
+    this.assert.equal(await contentsTd.getVisibleText(), "Table service")
+
+    const contentsTh = await this.querySelector("#thead0 th")
+    this.assert.equal(await contentsTh.getVisibleText(), "table thead0")
+  }
+
   get frameScriptEvaluationCount(): Promise<number | undefined> {
     return this.evaluate(() => window.frameScriptEvaluationCount)
   }