[Feature] "hx-include" element as html equivalent to script

[VictorSohier]

hx-include

Who

Here are the kinds of people I imagine using this feature:

• If you like the idea of web components, but want to have full ability to use your language server for html instead of writing template strings in javascript or other hacky solutions.
• If you want a simpler interface than:

  <div hx-get="x.html" hx-trigger="load" hx-swap="outerHTML"></div>

What

The idea is that this would be an element working in the style of #include <> in C (i.e., a simple replace), likely looking something along the lines of <hx-include src="x.html"></hx-include>, mirroring <script src="x.js"></script>.

Why

Webcomponents are a good idea, but they are half baked. It never seemed like anyone put any thought in their usability and reusability. Currently, if you want to use a webcomponent, you have two options:

• Baking them into your html files if you want to use the <template/> element. This becomes infeasible given the amount of code duplication this leads to.
• Stuffing the markup into a template string in javascript, in some editors, disables the html LSP.

How

Using a webcomponent to solve webcomponent problems.

If the maintainers of htmx have additional questions before implementation begins, please ask. It will help flesh out this idea or kill it if warranted.

[qrhfz]

hx-include is already used https://htmx.org/attributes/hx-include/

[svenberkvens]

Maybe call it <hx-load/> or <hx-replace/> instead?

This would be the first actual tag that HTMX would support. All other HTMX's functionality is invoked by attributes on normal HTML tags. So it would be "different". That requires good documentation.

Another idea would be:

<script type="hx-load" src="x.html"/>

But that comes close to what you were trying to avoid.

[VictorSohier]

Here is an existing implementation as something seperate. If the maintainers want it, I can make a PR: https://github.com/VictorSohier/html-include

[svenberkvens]

That looks interesting :-) Let's see if the devs are interested!

[wmanley]

Under what circumstances would you choose this approach rather than doing the include entirely server-side using the templating system of your choice?

The only thing I can come up with is if you have parts of your page that are going to be slow to load, so you want to return the bulk of your HTML first, and then afterwards show a spinner while a particular value is being generated, finally swapping it in. hx-trigger="load" seems fine in those cases.

[svenberkvens]

At my company, we have two backends. One legacy one and one modern one. The legacy backend embeds some elements in the HTML that loads stuff from the modern backend. For example, the modern backend is much better at generating active message counters than the legacy backend. So we let the frontend fetch those counters from the modern backend. The legacy backend does not do anything with the message counters (anymore).

The above is another use case for the proposal, although we currently handle it with hx-trigger="load".