You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fragment-include-explainer.md
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -179,8 +179,24 @@ This leaves it up to the author to make sure relative paths in an included fragm
179
179
The "module-ness" of this is similar to text or JSON modules, where the content is in the module tree and fetched like a module, but is not mutable in a way that affects all of its importers. In JS, you can do:
180
180
`import fragment from "something.html" { type: "fragment" }` which returns a cloned, sanitized `DocumentFragment`.
181
181
182
+
## Prior Art & Considerations Not Tackled
183
+
184
+
### 1. Server-Side and Edge Includes
185
+
-**SSI (Server-Side Includes):** E.g. `<!--#include virtual="/header.html" -->`. Standard synchronous markup inclusion compiled server-side.
186
+
-**ESI (Edge-Side Includes):** E.g. `<esi:include src="http://example.com/header.html" />`. CDN-level edge assembly.
187
+
-*Considerations Not Tackled:* ESI features complex caching parameters (`max-age`), conditional routing via `<esi:choose>`, and edge-side variable interpolation. Our proposal delegates caching entirely to HTTP caching headers, and does not provide template conditional syntax.
188
+
189
+
### 2. Client-Side Userland Libraries
190
+
-**`h-include` (Gustaf Nilsson Kotte):** A popular custom element `<h-include src="...">` fetching external HTML and injecting it.
191
+
-*Considerations Not Tackled:*`h-include` supports extracting a specific DOM subtree from the response using a CSS selector (e.g. `src="page.html" select="#main-content"`). While powerful, this requires parsing the entire document and discarding most of it. Our proposal targets pure raw fragments to optimize network payload and parsing overhead.
192
+
-**HTMX (`hx-get="..." hx-trigger="load"`):** Extends standard elements with declarative AJAX.
193
+
-*Considerations Not Tackled:* HTMX supports rich event-driven execution triggers (hover, click, scroll, form updates) and dynamic HTTP response header processing. Our proposal focuses solely on loading subresources as part of standard HTML parser initialization/layout updates.
194
+
-**Turbo Frames (`<turbo-frame src="...">`):** Part of Hotwire, isolates page sub-regions for partial navigation.
195
+
-*Considerations Not Tackled:* Turbo Frames intercept form submissions and link clicks inside the frame to hijack browser navigation. Our proposal is a layout and include primitive, not a navigation routing engine.
196
+
182
197
## Alternatives considered
183
198
199
+
184
200
### 1. Introducing a bespoke `<fragment>` element
185
201
An alternative is introducing a new bespoke element specifically for in-place or targeted updates, e.g. `<fragment src="fragment.html">` or `<fragment>Inline</fragment>`.
0 commit comments