oddbird / oddbird/css-anchor-positioning

ReferenceError: ShadowRoot is not defined when auto-polyfill runs without global ShadowRoot

Open
#451 3 comments 0 reactions 0 assignees View on GitHub

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

  1. index.ts calls polyfill() without awaiting or .catch()ing the returned promise, so the failure surfaces as an unhandled rejection, not as a failed import().
  2. 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

  1. Guard the check, e.g. typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot.
  2. Catch / await the auto-polyfill() promise in index.ts so a missing DOM feature does not become an unhandled rejection on mere import.
  3. Optionally skip auto-apply when required DOM APIs (ShadowRoot, etc.) are absent.

Happy to test a PR if useful.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.