An HTML module is a proposed module type for importing HTML through a module system. It aims to let teams keep component structure separate from JavaScript logic, much as CSS modules separate styling. section 15.1
Until HTML modules become available, a JavaScript module can hold template functions that return HTML and CSS. A Web Component then imports the module and renders the result. section 6.3
The intended benefits are practical:
- Move markup outside a large component class. section 15.1
- Let people focus on HTML, CSS, or JavaScript according to their strengths. section 15.1
- Support smaller templates and modular design-system styles, especially alongside Shadow DOM features. section 15.1
Template module workaround
A template module can export an object with render, html, and css methods. The component imports it and calls Template.render({ first_name: 'Emmett', ... }) inside connectedCallback(), keeping the component class focused on registration and lifecycle behavior. section 6.3
