ES6 Modules vs. HTML Imports

Question

HTML Imports are a part of the Web Components specification and provide a way to handle dependencies on the Web. ES6 modules also do the same thing, but just for Javascript code

Answer 1

How web components interact with ES6 modules has not been finalized yet, but there are at least two options.

ES6 has the notion of realms. If you have JavaScript in two iFrames, then the two iFrames can communicate with each other and pass data back and forth. But they are in different realms. This means that you can modify the Array.prototype object in one without affecting the other. Each web component will most likely have its own realm, and so they will not interfere with each other.

Each realm has a bunch of global objects, and that includes (most likely, the spec isn't finalized yet) the Loader object. You can create a new instance of a Loader and use it to load modules. There already exists one in the realm, which is the default one. Each Loader instance has it's own list of defined modules, and so each web component could be given it's own Loader instance.

I'm not sure if webcomponents will be given different Realms or different Loader objects, but different web components will most likely not be able to interfere with each other.

Answer 2

Here's the latest on this: Chrome has native support for all 4 Web Component specs, while Mozilla announced they will not ship an implementation of HTML Imports precisely because of this pending reconciliation with ES6 Modules, which isn't going to be resolved anytime soon, specially coz here's what Mozilla has to say about it:

We expect that once JavaScript modules — a feature derived from JavaScript libraries written by the developer community — is shipped, the way we look at this problem will have changed. We have also learned from Gaia and others, that lack of HTML Imports is not a problem as the functionality can easily be provided for with a polyfill if desired.

`