oddbird / oddbird/css-anchor-positioning
ReferenceError: ShadowRoot is not defined when auto-polyfill runs without global ShadowRoot
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 493
- Forks
- 18
- Avg merge
- 12h 37m
- Merged PRs (30d)
- 5
Description
Summary
Importing @oddbird/css-anchor-positioning (e.g. via esm.sh) auto-invokes polyfill() from src/index.ts. In environments that have window/document but do not expose a global ShadowRoot (incomplete DOM shims, some test harnesses), that call rejects with:
ReferenceError: ShadowRoot is not defined
if (root instanceof ShadowRoot) {
at src/dom.ts (querySelectorAllRoots).
Why this is hard to catch for consumers
index.tscallspolyfill()without awaiting or.catch()ing the returned promise, so the failure surfaces as an unhandled rejection, not as a failedimport().- Wrapping the dynamic import in
.catch()therefore does not protect callers — the module evaluates successfully, then the async polyfill blows up later.
Repro sketch
// Any host with document but no global ShadowRoot
globalThis.document = /* minimal document */;
// globalThis.ShadowRoot intentionally unset
await import('@oddbird/css-anchor-positioning');
// → unhandled rejection: ReferenceError: ShadowRoot is not defined
Seen with @oddbird/css-anchor-positioning@0.10.1 under Deno + a partial happy-dom global install (document present, ShadowRoot not copied onto globalThis).
Suggested fixes
- Guard the check, e.g.
typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot. - Catch / await the auto-
polyfill()promise inindex.tsso a missing DOM feature does not become an unhandled rejection on mere import. - Optionally skip auto-apply when required DOM APIs (
ShadowRoot, etc.) are absent.
Happy to test a PR if useful.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with querySelectorAllRoots in src/dom.ts and the automatic polyfill() call in src/index.ts, then reproduce the import in an environment with document but no global ShadowRoot. The work is done when importing the package no longer produces the reported ReferenceError or an unhandled rejection in that environment.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 67/100