webcomponents / webcomponents/polyfills
[scoped-custom-element-registry]: Support for JSDOM (Jest)
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
## Description
Please consider altering the polyfill to keep JSDOM's global `customElements` registry intact. This particular instance also includes some _internal bookkeeping the headless browser uses. Swapping it out completely breaks JSDOM down.
_However_ by swapping it out with a `Proxy`-ed object that delegates to the polyfill's instance where it can, and allows fallthrough to the original instance seems to also add support to JSDOM.
## Motivation
So why consider a "not a real browser" as some would put it? Currently, a large percentage of applications written with traditional frameworks (React or Vue) use Jest including JSDOM (v16+). Currently, web components are often sold to management as a future-proofing investment. Now if we take an organization adopting, say [Lion Web Components](https://lion-web.netlify.app/), suddenly all their Jest user teams' tests start breaking after [@open-wc/scoped-elements](https://www.npmjs.com/package/@open-wc/scoped-elements) has updated to use this polyfill.
## Note
As far as I managed to test it, the following [change to the polyfill](https://github.com/webcomponents/polyfills/blob/master/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.js#L400-L405) would solve the problem for JSDOM. I'm happy to send a PR if needed:
```js
// Install global registry
const globalRegistry = new CustomElementRegistry();
Object.defineProperty(window, 'customElements', {
value: new Proxy(window.customElements, {
get: (original, prop) => prop in globalRegistry ?
globalRegistry[prop] :
original[prop],
}),
configurable: true,
writable: true,
});
```
Contributor guide
Assessment
This issue has not been assessed yet.