webstead: mark script as async

Apparently Chromium can't cope with "defer" scripts (which modules are
by default) in XHTML documents.  But "async" scripts work properly,
so now we use one of those and then wait for DOMContentLoaded as
necessary.

diff --git a/webstead.xhtml b/webstead.xhtml
index 61a261ee6add72703f44ede2e8c3cb1c88f4cd44..c3bb0c1e5197142b193169413f2e7e28a69e3839 100644 (file)
--- a/webstead.xhtml
+++ b/webstead.xhtml
@@ -38,7 +38,10 @@
           background: currentColor;
       }
     </style>
-    <script type="module"><![CDATA[
+    <!-- Script is async rather than deferred because Chromium can't
+         handle deferred scripts in XHTML.
+         https://issues.chromium.org/issues/40518469 -->
+    <script type="module" async="async"><![CDATA[
     import Bedstead from './bedstead.js';
     function update_glyph() {
         var args = [];
@@ -71,10 +74,19 @@
             }
         });
     }
-    for (var e of document.getElementsByTagName('input')) {
-        e.onchange = update_glyph;
+    function init() {
+        for (var e of document.getElementsByTagName('input')) {
+            e.onchange = update_glyph;
+        }
+        update_glyph();
+    }
+    // This script is loaded asynchronously, so make sure the DOM is
+    // loaded before touching it.
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
     }
-    update_glyph();
 ]]>
     </script>
   </head>