CustomElementsRegistry Spec Implementation alignment

[thescientist13]

Overview

Currently, our implementation of CustomElementsRegistry doesn't uphold the browser restriction that no more than one custom element definition can ever be set with customElements.define. This is something seen in Lit's SSR DOM shim where they will throw an Error

However, to be spec compliant, it probably should, however this feature is mostly relaxed to support SSR use cases like for Greenwood, where pages and API routes could all be accessing this shims, and as such trying to orchestrate that would often require running everything in isolation, whereas for serverless and edge environments its less of an issue because everything runs in isolation.

For example, the Lit recommends executing in isolation - https://lit.dev/docs/ssr/server-usage/#running-ssr-in-a-vm-module-or-the-global-scope

Details

For Greenwood, we used to run all the SSR work in a Worker thread, but removed it for concerns over serverless environment compatibility, and trying not impose any platform specific APIs, but maybe that's something we should revisit? I know this decision is being evaluated again for Greenwood as as part of Lit support (ProjectEvergreen/greenwood#1201) since Lit does enforce the restriction, hence why we may need to re-introduce an isolation mechanism perhaps?

That said, what's the big deal if we don't follow the specification? 🤔

---

Will keep an eye on this in consideration with the above Greenwood talks and a discussion over there about re-intergrating Workers and maybe introducing an isolation mode? - ProjectEvergreen/greenwood#1117

[thescientist13]

Another call out that for upstream projects they may want to consider an "isolation" mode - #147

[thescientist13]

Another thought is that we should try and make the DOM shim side effect free as much as possible. At the very least for bundlers. So instead of

import 'wc-compiler/src/dom-shim.js';

It would be something like this, so you can programmatically choose when to apply the shim.

import { init } from 'wc-compiler/src/dom-shim.js';

// call init whenever you want
init();