Flag to disable upgradable constructor

[nolanlawson]

By default, we define a custom element with an "upgradable constructor":

lwc/packages/@lwc/engine-dom/src/custom-elements/create-custom-element-vanilla.ts

Lines 27 to 44 in f817a04

	class UpgradableConstructor extends HTMLElement {
	constructor(upgradeCallback: LifecycleCallback) {
	super();
	// If the element is not created using lwc.createElement(), e.g. `document.createElement('x-foo')`,
	// then elementBeingUpgraded will be false
	if (elementBeingUpgradedByLWC) {
	upgradeCallback(this);
	} else if (hasConnectedCallback || hasDisconnectedCallback) {
	// If this element has connected or disconnected callbacks, then we need to keep track of
	// instances that were created outside LWC (i.e. not created by `lwc.createElement()`).
	// If the element has no connected or disconnected callbacks, then we don't need to track this.
	elementsUpgradedOutsideLWC.add(this);
	// TODO [#2970]: LWC elements cannot be upgraded via new Ctor()
	// Do we want to support this? Throw an error? Currently for backwards compat it's a no-op.
	}
	}
	}

This allows us to define multiple LWC components with the same tag name.

However, maybe we should just register one LWC component per tag name. In other words, this would fail:

lwc.createElement('x-foo', { is: A })
lwc.createElement('x-foo', { is: B }) // would throw

Benefits:

• Alignment with what most other web component frameworks do
• Opens the door to enabling attributeChangedCallbacks for each component Components do not respect observedAttributes/attributeChangedCallback #2972
• Would allow the bare constructor or document.createElement('x-foo') to work Component constructors cannot be new-ed #2970

To achieve this, we can add a runtime flag (e.g. DISABLE_UPGRADABLE_CONSTRUCTOR).

/cc @caridy

[git2gus]

This issue has been linked to a new work item: W-12152305

[nolanlawson]

One tricky part will be getting this to work in the Karma tests. A few options:

1. Launch a new browser window/context for every test (slow, may not work with Jasmine/Karma)
2. Use a pivot implementation (tricky, might end up testing the polyfill rather than the actual engine code)
3. Use an iframe (would require creating/destroying an iframe in every test, a bit slower but may be feasible)
4. Ensure component tag names are unique across tests (lots of refactoring work, but most straightforward approach)

I'm leaning toward #3 or #4. /cc @jmsjtu

[nolanlawson]

If we do this, we will want to remove this line, so that the createCustomElement runs in separate Locker namespaces:

lwc/packages/@lwc/engine-dom/src/renderer.ts

Lines 33 to 34 in dfae644

	// relies on a shared global cache
	createCustomElement,

Incidentally this should be fine per the comment, because the shared global cache would be gone.