---
+HTML Modules would provide a means of referencing HTML through the web's module system. For Web Components specifically, this would allow the usage of import to load and initialize the template of a custom element, much in the same way CSS Modules would work for an adoptedStyleSheet.
Additionally, this could open up the concept of Single File Components (SFC) to the web.
Summary or proposal based on current status; paragraph(s) and code.
+
+ import template from 'my-template.html' as HTMLTemplateElement;
+
+ MyCustomElement extends HTMLElement {
+ constructor() {
+ const root = this.attachShadow({mode: 'closed'});
+ root.appendChild(document.importNode(template));
+ }
+ }
+
---
+The primary motivation for HTML Modules is to round out ESM so that all of the three main web languages (HTML / CSS / JS) can be leveraged through a module system. For Web Components, this is especially helpful for scenarios related to Server Side Rendering or any form of templating, static or otherwise. Having a common mechanism in JavaScript to author and use Web Components makes for a great experience all around.
+Additionally it will work great if you prefer to separate your technologies (e.g. my-component.(js|css|html) ), or your (CSS|HTML)-in-JS
in one file.Document? As a string? (see the scope concern above)