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.