A page with several Web Components can become a fragile stack of script references. JavaScript modules let the page load one entry file while each component imports the dependencies it needs. An import statement names another module and, when importing an export, makes that binding available in the current module. section 5.2
Follow a component dependency
The application module imports its string-container component: import Strings from '../strings/strings.js';. The container then imports the default-exported string class from '../string/string.js'. That string module also registers the custom element used by the container. The HTML page needs only the application module as its JavaScript entry point. section 5.2
Listing 5.8. The Web Harp application Web Component
// file: components/app/app.js
import Strings from '../strings/strings.js';
export default class WebHarpApp extends HTMLElement {
connectedCallback() {
this.innerHTML = '<webharp-strings strings="' +
this.getAttribute('strings') + '"></webharp-strings>';
}
}
if (!customElements.get('webharp-app')) {
customElements.define('webharp-app', WebHarpApp);
}
The application component imports its child component, then renders that child as a custom element. section 5.2
This is a different approach from HTML Imports, which were proposed for bringing component markup and logic into a document but never became a standard. Module imports can also let a component take just the library it needs rather than requiring the page to load an entire framework. For older-browser or production builds, bundling can combine files while leaving out unused imports. section 1.1 section 1.2 section 12.6
