[idea] HTML Modules: Allow exporting without a script

[travisleithead]

(Copied from MicrosoftEdge/MSEdgeExplainers#9, which has some additional discussion before leaving the issue for future consideration; filing here to ensure it gets properly recorded.)

Originally filed by @phistuck:

---

Define a new HTML content attribute, export or exportname or namedexport (and defaultexport?) or something similar that allows elements to be exported without any inline scripts.

<!-- module.html -->
<div namedexport="content">
Warning - this might hurt.
</div>

// main.js
import {content} from "module.html";
document.body.appendChild(content);

I imagine some HTML modules might have no scripting logic, they would only exist to share content and inline scripts are too wordy for those cases.

That could maybe make them available from HTML directly as well...

<!-- Bonus -->
<!-- page.html -->
<content import="module.html" namedimport="content"></content>

A little bit like server-side includes. But this is crazy talk.

[justinfagnani]

+1

This was included in our strawman here: #645 (comment)

For modules that contain only templates, this is a great simplification for providing the exports.

Also a huge fan of <content> (under a different name, likely, due to WCv0). I have a custom element that addresses that too: https://www.npmjs.com/package/html-include-element but I've seen a lot of requests for this to be built in.

[Jamesernator]

but I've seen a lot of requests for this to be built in.

One reason I'm interested is because it could work inside <noscript> and give content to people with scripts turned off but without sending superfluous content to people who don't need it.

[bahrus]

I'd also like to see support for lazy loading, like iFrames, images now have.

My suggestion for syntax is here (WIP).

[sashafirsov]

Take a look into HTC. Declarative definitions of input parameters, exported functionality, ... up to packaging into deployment archive.

[adrianhelvik]

Spitballing:

template.html

<export name="default">
  <template>
    Hello, I am a template!
  </template>
</export>

index.html (possibly)

<script type="module">
import template from './template.html'

console.log(template instanceof HTMLTemplateElement) // true
</script>
<import name="default" src="./template.html">

Or perhaps it should be a DocumentFragment. Or it could throw an error if there are more than one child. Not sure. I think having an element dedicated to this would be better than an attribute however.

[adrianhelvik]

Then again I think should probably be added in a separate proposal.

[sashafirsov]

It would be handy to list proposals of the syntax and their compliance against existing use.

• #id is already used by SVG to get elements and partially by HTML url to point the element without extraction. There are more of use for URI with hash.
• <define name="my-element" export> from HTML modules strawman
• this proposal with variations of export or exportname or namedexport, defaultexport.
• ?