[scoped-custom-element-registry] customize() eagerly swallows any exception and causes a confusing error message

[denilsonsa]

Description

This piece of code is swallowing all exceptions, and ends up triggering another one:

polyfills/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts

Lines 641 to 646 in 10f8e07

	try {
	new definition.elementClass();
	} catch (_) {
	patchHTMLElement(definition.elementClass);
	new definition.elementClass();
	}

On Firefox and on Safari:

Uncaught TypeError: Cannot instantiate a custom element inside its own constructor during upgrades

On Chrome:

Uncaught TypeError: Failed to construct 'HTMLElement': This instance is already constructed

Example

This happened in our big web application. I tried reproducing it in a smaller scale, but I still cannot figure out how to trigger the customize() function, and thus my minimal testcase still cannot reproduce this bug.

Steps to reproduce

1. Have a large enterprise web application with dozens of components. Then start migrating it from the company-library v2 to v4, which also migrates Lit from v1 to v3.
   • Seriously, if I had a minimal testcase that could show the bug to you, I would add it here.
2. Somehow, a page fails to load. The error message is cryptic (as described above).
3. After a lot of debugging, figure out that scoped-custom-element-registry.js:386 is capturing all exceptions, and then constructing the HTML element again on the next line.
   • When I inspected the value of the _ exception, I got the actual error message that showed me what went wrong. Here some examples of the actual error messages I found so far:
     • Value passed to 'css' function must be a 'css' function
     • TypeError: this.renderOptions is undefined

Expected behavior

The actual error message from the actual exception cause by my source-code should be shown to the developer.

Actual behavior

A completely unrelated and cryptic exception is shown to the developer, which sounds like a bug in the scoped-custom-element-registry exception handling. (And also a limitation on the JavaScript exception handling primitives.)

Version

• @webcomponents/scoped-custom-element-registry 0.0.9 (the latest version)

Browsers affected

• Chrome
• Firefox
• Edge (untested, but certainly also affected, as Edge used the same engine as Chrome)
• Safari
• IE 11 (no one cares anymore)