JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<nav id="menu-container">
  <div class="menu-placeholder">Loading...</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
    ...
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>

JavaScript

const test = async () => {
  const container = document.getElementById('menu-container');
  const placeholder = container.querySelector('.menu-placeholder');
  // Fetch all the children of menu that are not yet defined.
  const undefinedElements = container.querySelectorAll(':not(:defined)');
 class navMenu extends HTMLElement {};
 //customElements.define('nav-menu', navMenu)
	window.customElements.whenDefined('nav-menu')
  .then((test)=>{
  	console.log('nav-menu',test)
  })
  


/*  const promises = [...undefinedElements].map(
    button => customElements.whenDefined(button.localName)
  );
  
  // Wait for all the children to be upgraded, 
  // then remove the placeholder.
  console.log('yea', promises)
  await Promise.all(promises);
  console.log('yea')
  container.removeChild(placeholder); */
}

test();