Making iframes be the right size is super awkward. I might actually use them more if they were easy to get responsive.

This post does link to a technique (new to me) to extract iframe contents:

    <iframe src="/example.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

I've come across this technique here [0] to try it on <object> elements, but sizing is even more difficult there.

[0]: https://www.filamentgroup.com/lab/html-includes/

Are we solving the information-centric transclusion problem, or the design-centric asset reuse problem? An iframe is fine for the former but is not geared towards design and layout solutions.

It kinda sucks for both! Dropping in a box of text that flatly does not resize to fit its contents does not fit the definition of "fine" for me, here.

You can do some really silly maneuvers with `window.postMessage` to communicate an expected size between the parent and frame on resize, but that's expensive and fiddly.

Iframes fundamentally encapsulate html documents, not fragments.

Interaction between elements in different iframes is very restricted.

IIRC, you can communicate entire JSON objects between an iframe and it's host frame with PostMessage.

The host can then act as a server for the iframe client, even updating it's state or DOM in response to a message from the iframe.