webcomponents / webcomponents/polyfills

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

Open
#608 0 comments 0 reactions 0 assignees View on GitHub
Focus Area: Standards & Polyfills Type: Bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.