Skip to content

Instantly share code, notes, and snippets.

Last active November 13, 2022 16:11
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?

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 (works in Chrome / Edge)

<!DOCTYPE html>
<html lang="en">
  <!-- a synchronous script -->
  (() => {
    // any needed import path
    const imports = {
      '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'] = '';

    // the importmap script
    const script = document.createElement('script');
    script.type = 'importmap';
    script.textContent = JSON.stringify({imports});

  <!-- 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>';
<body is="hello-world"></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment