It was actually pretty neat, because you could have an HTML file with a template, style, and script section.
Safari rejected the proposal, so it had to get dropped.
But ESM makes it a bit redundant anyway. The end-goal is to allow you to import any kind of asset, not just JS. There have been demos and examples of tools supporting this going back over half a decade at this point.
<!--#include virtual="/cgi-bin/example.cgi?argument=value" -->
edit:
My goal is to avoid reloading the page for each selection and rendering all items eagerly. JS frameworks are the only ones that really allow this behavior.
It was a feature in Chrome 36-79 and there were working polyfills to make it work on other browsers.
It was actually a great feature and I used it extensively on an old project back then.
CanIUse: https://caniuse.com/imports
(Now obsolete) tutorial: https://www.sitepoint.com/introduction-html-imports-tutorial...
<calc> /* ... compute and return dom element */ </calc>
in HTML. Or maybe it's been discussed but got left out
<script>document.write(`<p>foo</p>`)</script>
<dom-calc>
const p = document.createElement('button');
p.innerText = 'hi';
p.onclick = () => alert('hi');
return p;
</dom-calc>
class CalcElement extends HTMLElement {
connectedCallback() {
setTimeout(() => {
const fn = new Function(this.innerText);
this.replaceWith(fn());
}, 0);
}
}
customElements.define('dom-calc', CalcElement); <?php require("somemodule.html"); ?>