Better support for global registration patterns

Suggestion

It seems likely the compiler logic used for globalThis could be reused to support automated global types for custom elements , which is especially annoying and difficult to deal with in jsx

Use Cases

this is the current dev workflow for creating and using custom elements

The custom element
loading-spinner.ts

 class LoadingSpinner extends HTMLElement {
  constructor() {
    super();
  this.innerHTML =  `<div class="loading-spinnner">` 
   }
//omitting code for brevity
}

customElements.define('loading-spinner', LoadingSpinner); //<-- could this be added to a global namespace using similar logic as globalThis ?

the type definition
loading-spinner.d.ts

//this is coupled to a specific JSX namespace's types (preact in this case)
//maybe adding a JSX.CustomElementsNamespace to lib.d.ts could be an option as well?

interface LoadingSpinner extends JSX.HTMLAttributes {}

declare namespace JSX {
  interface IntrinsicElements {
    'loading-spinner': LoadingSpinner;
  }
}

Using the custom component
usage in a jsx component

import h from Reactish
let MyComponent = () => {
return (
 <loading-spinner/> //<--so difficult not to get errors here
)
}

Start with the compiler logic used for globalThis and the proposed lib.d.ts JSX.CustomElementsNamespace, then compare them with loading-spinner.ts and loading-spinner.d.ts. The work is done when customElements.define('loading-spinner', LoadingSpinner) can provide JSX typing without the manual namespace declaration.