webcomponents / webcomponents/polyfills
[scoped-custom-element-registry] customize() eagerly swallows any exception and causes a confusing error message
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
### Description
This piece of code is swallowing all exceptions, and ends up triggering another one:
https://github.com/webcomponents/polyfills/blob/10f8e07aed8d0eff6daa8f9608bce3cf049d485e/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts#L641-L646
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](https://codepen.io/denilsonsa/pen/emYzxqg) 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
- [x] Chrome
- [x] Firefox
- [ ] Edge (untested, but certainly also affected, as Edge used the same engine as Chrome)
- [x] Safari
- [ ] IE 11 (no one cares anymore)
Contributor guide
Assessment
This issue has not been assessed yet.