HTML Modules

HTML Modules allow web developers to package and access declarative content from script in a way that allows for good componentization and reusability, and integrates well into the existing ES6 Modules infrastructure.

The introduction of ES6 Script Modules has provided several benefits for javascript developers including more componentized code and better dependency management. However, easy access to declarative content has been a consistent limitation with Script Modules. For example, if one wants to pack a custom element definition in a module, how should the HTML for the element's shadow tree be created? Current solutions would involve generating it dynamically (document.createElement or innerHTML), but it would be preferable to simply write HTML and include it with the module. With HTML Modules this will be possible. There is clear demand for this functionality in the developer community -- ideas pertaining to HTML Modules have resulted in a great deal of developer and browser implementer engagement. HTML Imports were proposed (and implemented in Chromium) as a solution, but they were developed independently of ES6 Modules and have several limitations: - Global object pollution - Parse blocking with inline script - Independent of dependency resolution infrastructures between HTML Imports and HTML Modules - Non-intuitive import pass through Integrating HTML Modules into the existing ES6 Module system, rather than creating it as a standalone component, will address these gaps.

Documentation

Status in Chromium

Blink>HTML


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Last updated on 2020-07-05