This page demonstrates the following: HTML starts off with no import map script; a deferred script is encountered and it crafts an import map at runtime and places its script to the head of the DOM; another ES module is encountered and this one uses a bare specifier which is mapped in the map added previously. Will this work?
Nooo, check the developer tools console! The dynamic import map is added to the DOM, and then the other script is added, but the developer tools show the error seen when no import map is found:
The specifier “module” was a bare specifier, but was not remapped to anything.
We can't even wait for the load event of the import map
script because that even only fires for scripts with a src
attribute - when their linked file downloads.
Inline scripts don't have this behavior and we can't use a linked script,
because then we'll run into the issue described on the main page where
the file: protocol won't serve the right MIME type for the
import map script file.
I did try to check around this by using a timeout with up to a second long interval, but to no avail. The dynamically added import map is simply not respected.
Testing in Chrome, I do find that it produces an error when inserting an import map after any ES module load event has occured:
An import map is added after module script load was triggered.
This led to my realization that I can split the script in two
where one creates and inserts the import map synchronously, and the other
is a module script, so it loads deferrer and at a time when the import map
already exists.
This works in Firefox and will most likely work in Chrome as well!