Better support for global registration patterns

[jeremy-coleman]

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
)
}

[DanielRosenwasser]

I don't think so, but it sounds like you want an easier way to apply global augmentations for registration patterns which are necessary for custom elements, which is a reasonable request.

[jeremy-coleman]

Ah, was hoping it could be implemented easily by treating the customElement registry similar to a global var, but yes you summed it up perfectly. There is really a need beyond just custom elements , but i think that is the best target to aim for currently. On a related note, the stencil compiler generates types and writes them to disk on the fly , which may be a useful resource if you decide to pursue this