webcomponents / webcomponents/polyfills

[scoped-custom-element-registry]: Support for JSDOM (Jest)

Open
#459 2 comments 10 reactions 1 assignee Claimed by @bicknellr View on GitHub
Focus Area: Standards & Polyfills Type: Feature
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

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.