registration of a custom element is being assumed when initializing a custom element

[thescientist13]

Summary

In this section of code in initializeCustomElement, where in we see an element has already been registered, we only do so if we have a reference to a tag name

const element = tagName
  ? customElements.get(tagName)
  : (await import(pathname)).default;

Technically this should be fine, because in the only place where it is getting called with a tagName, it already checks if a "local" definition exists

if (definitions[tagName]) {
  const { moduleURL } = definitions[tagName];
  const elementInstance = await initializeCustomElement(moduleURL, tagName, node.attrs, definitions);

However...

Details

As observed in ProjectEvergreen/greenwood#1186 when refactoring Greenwood's bundle output and seeing in a demo repo when just running the server locally, that refactor exposed an interesting use case where in a custom element definition was getting used across two distinct API routes and for some reason the second invokation of using renderFromHTML caused a failed re-use of a custom element definition

greenwood-wcc-element-instance-no-shadow-root.mov

Not really sure, why maybe some race conditions? But a really simple solution is to just augment check if its actually in the registry first, which we probably should have been doing anyway. 😅

const element = customElements.get(tagName) ?? (await import(pathname)).default;