Merge pull request #397 from alphagov/frontend-supported

Clarify purpose of `<script type="module">` + snippet
alphagov · Dec 8, 2023 · f663c8e · f663c8e
2 parents 48740a9 + e8b73f4
commit f663c8e
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/source/importing-css-assets-and-javascript/index.html.md.erb b/source/importing-css-assets-and-javascript/index.html.md.erb
@@ -160,7 +160,15 @@ You can also use your own function to generate paths, for example if you're usin
 
 ## JavaScript
 
-Before you import JavaScript from GOV.UK Frontend, you'll need to add the following to the top of the `<body class="govuk-template__body">` section of your page template (if you're not [using our Nunjucks macros](/use-nunjucks/)):
+GOV.UK Frontend JavaScript must be run with `<script type="module">`.
+
+This protects older browsers, including all versions of Internet Explorer, from running modern JavaScript that it does not support. Read about our [browser support](../browser-support/) for more information.
+
+### Before you start
+
+You'll need to add the following to the top of the `<body class="govuk-template__body">` section of your page template if you're not [using our Nunjucks macros](/use-nunjucks/).
+
+This snippet adds the `.govuk-frontend-supported` class in supported browsers:
 
 ```html
 <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
@@ -182,7 +190,10 @@ Then import the JavaScript file before the closing `</body>` tag of your HTML pa
 
 ```html
 <body class="govuk-template__body">
+  <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
+
   <!-- // ... -->
+
   <script type="module" src="<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js"></script>
   <script type="module">
     import { initAll } from '<YOUR-JAVASCRIPTS-FOLDER>/govuk-frontend.min.js'