The nomodule Attribute for Legacy Fallbacks

Technical Deep Dive & Specifications

The Mechanics of Differential Serving

The Differential Serving Pattern relies on two complementary browser behaviors defined across different specification eras:

1. Modern User Agents:
   • Parse and execute <script type="module" src="modern.js">.
   • Recognize the nomodule boolean attribute on <script nomodule src="legacy.js"> and refuse to fetch or execute it.
2. Legacy User Agents (e.g., Internet Explorer 11, older Android WebViews):
   • Encounter <script type="module">. Because type="module" is an unrecognized MIME type in legacy engines, they skip the script entirely.
   • Encounter <script nomodule src="legacy.js">. Because they do not know what the nomodule attribute means, they treat it as an unknown HTML attribute, ignore the attribute, and fetch and execute the legacy script.

The Bundle Size Dividend

By splitting your build pipeline into modern and legacy targets:

The Safari 10.1 Double-Execution Edge Case

When Apple released Safari 10.1 (iOS 10.3), they shipped partial support for ES modules: Safari 10.1 recognized type="module", but did not implement the nomodule attribute. As a result, Safari 10.1 executed the modern module and executed the legacy script, causing double-execution bugs.

To neutralize this in production, web architects inject an inline micro-guard before any scripts:

<!-- Safari 10.1 nomodule double-execution mitigation snippet -->
<script>
  (function() {
    var check = document.createElement('script');
    if (!('noModule' in check) && 'onbeforeload' in check) {
      var support = false;
      document.addEventListener('beforeload', function(e) {
        if (e.target === check) {
          support = true;
        } else if (e.target.hasAttribute('nomodule')) {
          e.preventDefault();
        }
      }, true);
      document.head.appendChild(check);
      check.remove();
    }
  })();
</script>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 14–30 (<script type="module">): Contains modern JavaScript featuring ES2020 optional chaining (??) and class public fields. Modern browsers execute this code and skip the subsequent nomodule tag.
• Lines 33–42 (<script nomodule>): Contains ES5-compatible markup. Modern browsers ignore this tag completely. Legacy engines (which do not recognize type="module") skip the module and execute this legacy block.

Expected Browser Render Output

Differential Serving Engine

[ ES Module Bundle ]
Modern Engine OK (Navigator Cores: 8)

(DevTools Console Output):
[Runtime]: Modern ES Module engine activated.
(Notice: "[Runtime]: Legacy ES5 fallback..." is NEVER printed!)