Using JavaScript modules embedded in HTML

Today I came across this interesting article by Manuel Matuzović. The whole post is a nice read, but one nice trick jumped out for me. Manuel is “cutting the mustard”^[1] using this little embedded JavaScript snippet:

<script type="module">
  document.documentElement.classList.remove('no-js');
  document.documentElement.classList.add('js');
</script>

Using the type="module" attribute makes sure that only modern browsers with JavaScript module support run this snippet. Nifty!

I had never come across a <script> element with a type="module" attribute that was not linking to the URI of an external script and I was wondering if this was some sort of hack. So I tried the following snippet.

<script type="module">
  const body = document.body;
  body.style.backgroundColor = 'deeppink';
  // beautiful
</script>
<script type="module">
  body.style.backgroundColor = 'purple';
  // Uncaught ReferenceError: body is not defined
</script>

A const body defined in the first module is available only in that module and trying to use it in the second module results in an Uncaught ReferenceError: body is not defined. So of course it is not a hack. It is behaving exactly as you would expect.