A module is a bounded piece of code that can be imported by another file. For a Web Component, that means the page can load one entry file while the component imports what it needs. Contrast this with a page that lists every component script and stylesheet itself: adding a component also means remembering all its dependencies. section 5.0 section 5.2
Listing 5.5. A minimal application HTML file for our Web Harp demo
<html>
<head>
<title>Web Harp</title>
<script type="module" #1
src="./components/app/app.js">
</script>
<link href="csshake.min.css" #2
type="text/css" rel="stylesheet">
<link href="main.css" #3
type="text/css" rel="stylesheet">
</head>
<body>
<webharp-app strings="8"></webharp-app>
</body>
</html>
The harp page loads its application component with <script type="module">. That file can import components for the individual strings; the page does not need a script tag for each one. Notice that the example still links CSS files—one module entry does not automatically make every dependency self-contained. section 5.2
How does a child component become available? Its file exports a class, such as export default class WebHarpString. A parent file imports that class by path, and the child file registers its custom element. The application component imports the parent in turn. The result is a chain of explicit JavaScript dependencies behind a single page-level entry. section 5.2
A module can separate responsibilities without requiring every responsibility to become a new component:
- Keep markup and CSS in a template.js module that exports a render method; import it into a small component class and assign its output to innerHTML. section 6.3
- Keep a shareable slider class in slider.js and its markup and CSS in template.js. Leave size and background styling outside so a page can customize them. section 6.7
Listing 6.7. Business card customizer component
import Template from './template.js'; #1
class BizCard extends HTMLElement {
connectedCallback() {
this.innerHTML = Template.render({ #2
first_name: 'Emmett',
last_name: 'Brown',
title: 'Student of all Sciences',
phone: '555-4385',
email: 'emmett@docbrown.flux',
website: 'www.docbrown.flux'
});
}
}
if (!customElements.get('biz-card')) {
customElements.define('biz-card', BizCard);
}
The business-card component imports Template from ./template.js and calls Template.render(...) with card values. The component class handles placement; the imported module handles rendering. section 6.3
Existing code is not always importable. MIDI.js, used for the harp’s sound, predates the module features used here. A Node.js utility wraps its global MIDI value into an importable file. This is a practical workaround, described as imperfect rather than a reason to rewrite the audio library. section 5.4
Modules organize dependencies; they do not dictate where all HTML and CSS must live. In this approach, template literals carry markup and styles through JavaScript modules because HTML and CSS modules were not yet treated as available alternatives. The older HTML Imports approach is deprecated. section 6.3 section 15.0
