WebReflection · October 19, 2024 12:44 · Oct 18, 2024 · May 1, 2024 · Oct 19, 2022 · Sep 28, 2021
diff --git a/importma.md b/importma.md
@@ -1,4 +1,4 @@
-# A Runtime ImportMap Example
+# A Runtime ImportMap Example - [now as a module](https://github.com/WebReflection/importmap)
 
 While it's not possible to define a `<script type="importmap">` within a module, it is possible to define it in a synchronous `<script>` tag, as long as it's before any *module* starts executing.
 

diff --git a/importma.md b/importma.md
@@ -2,7 +2,7 @@
 
 While it's not possible to define a `<script type="importmap">` within a module, it is possible to define it in a synchronous `<script>` tag, as long as it's before any *module* starts executing.
 
-**[Example](https://codepen.io/WebReflection/pen/xxrmXQj?editors=1000)** <sup><sub>(works in Chrome / Edge)</sub></sup>
+**[Example](https://codepen.io/WebReflection/pen/xxrmXQj?editors=1000)** <sup><sub>(works in Chrome / Edge / WebKit / Safari / Firefox)</sub></sup>
 
 ```html
 <!DOCTYPE html>

diff --git a/importma.md b/importma.md
@@ -23,7 +23,7 @@ While it's not possible to define a `<script type="importmap">` within a module,
       new Script;
     }
     catch (o_O) {
-      imports['vanilla-elements'] = 'https://cdn.skypack.dev/vanilla-elements/es.js';
+      imports['vanilla-elements'] = 'https://cdn.skypack.dev/vanilla-elements/poly';
     }
 
     // the importmap script

diff --git a/importma.md b/importma.md
@@ -2,7 +2,7 @@
 
 While it's not possible to define a `<script type="importmap">` within a module, it is possible to define it in a synchronous `<script>` tag, as long as it's before any *module* starts executing.
 
-**[Example](https://codepen.io/WebReflection/pen/xxrmXQj?editors=1000)** (works in Chrome / Edge)
+**[Example](https://codepen.io/WebReflection/pen/xxrmXQj?editors=1000)** <sup><sub>(works in Chrome / Edge)</sub></sup>
 
 ```html
 <!DOCTYPE html>

diff --git a/importma.md b/importma.md
@@ -2,7 +2,7 @@
 
 While it's not possible to define a `<script type="importmap">` within a module, it is possible to define it in a synchronous `<script>` tag, as long as it's before any *module* starts executing.
 
-**Example**
+**[Example](https://codepen.io/WebReflection/pen/xxrmXQj?editors=1000)** (works in Chrome / Edge)
 
 ```html
 <!DOCTYPE html>

diff --git a/importma.md b/importma.md
@@ -0,0 +1,49 @@
+# A Runtime ImportMap Example
+
+While it's not possible to define a `<script type="importmap">` within a module, it is possible to define it in a synchronous `<script>` tag, as long as it's before any *module* starts executing.
+
+**Example**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- a synchronous script -->
+  <script>
+  (() => {
+    // any needed import path
+    const imports = {
+      'vanilla-elements': 'https://cdn.skypack.dev/vanilla-elements/'
+    };
+
+    // any useful feature detection (builtin extends in this case)
+    try {
+      class Script extends HTMLScriptElement {}
+      customElements.define('no-💩', Script, {extends: 'script'});
+      new Script;
+    }
+    catch (o_O) {
+      imports['vanilla-elements'] = 'https://cdn.skypack.dev/vanilla-elements/es.js';
+    }
+
+    // the importmap script
+    const script = document.createElement('script');
+    script.type = 'importmap';
+    script.textContent = JSON.stringify({imports});
+    document.head.appendChild(script);
+  })();
+  </script>
+
+  <!-- any module -->
+  <script type="module">
+  import {define, HTML} from 'vanilla-elements';
+  define('hello-world', class extends HTML.Body {
+    connectedCallback() {
+      this.innerHTML = '<h1>Hello World 👋</h1>';
+    }
+  });
+  </script>
+</head>
+<body is="hello-world"></body>
+</html>
+```