fix: element removed from the DOM when directly under the shadow root

[jpzwarte]

Problem

When a position-area target element sits directly inside a shadow root, wrapperForPositionedElement failed to wrap it and instead removed it from the DOM entirely.

The wrapping logic was:

targetEl.parentElement?.insertBefore(wrapperEl, targetEl);
wrapperEl.appendChild(targetEl);

A ShadowRoot is a Node, not an Element, so targetEl.parentElement is null when the target is a direct child of the shadow root. The optional chaining short-circuited the insertBefore, but the following wrapperEl.appendChild(targetEl) still ran — moving the target into a wrapper that was never inserted into the tree. The result: the target disappeared from the rendered DOM.

Fix

Insert the wrapper relative to the target itself rather than going through its parent:

targetEl.insertAdjacentElement('beforebegin', wrapperEl);
wrapperEl.appendChild(targetEl);

insertAdjacentElement('beforebegin', …) places the wrapper just before the target without referencing the parent node, so it works whether the parent is a regular element or a shadow root.

Second fix: position-area mapping styles not reaching shadow roots

Even once wrapped, the target wasn't positioned: the generated position-area mapping stylesheet (which defines the --pa-value-* custom properties on the wrapper) was always appended to document.head, and a <style> there doesn't apply inside a shadow root. So --pa-value-* stayed empty and the wrapper collapsed to its static position.

transformCSS now inserts these polyfill-created styles into each polyfilled root via a new getRootStyleContainer helper (shadow root → that shadow root; document → document.head). The wrapper now resolves its insets and alignment correctly inside a shadow root.

Test page

Updated shadow-dom.html to reproduce the scenario: the target/anchor now live directly under the shadow root (no intermediate position: relative wrapper) and use position-area syntax, which exercises the wrapping code path. The adopted-stylesheets e2e test now asserts against the <polyfill-position-area> wrapper (right edges aligned, target top at anchor bottom).

[netlify]

✅ Deploy Preview for anchor-polyfill ready!

Name	Link
🔨 Latest commit	fee8993
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-polyfill/deploys/6a42946163c379000884ea6c
😎 Deploy Preview	https://deploy-preview-422--anchor-polyfill.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for anchor-position-wpt canceled.

Name	Link
🔨 Latest commit	fee8993
🔍 Latest deploy log	https://app.netlify.com/projects/anchor-position-wpt/deploys/6a4294617722d900081b91ad

[jamesnw]

This looks good! Thanks! Can you fix the tests?

[jpzwarte]

This looks good! Thanks! Can you fix the tests?

I would like to, but NODE_OPTIONS='--no-experimental-strip-types' playwright test tests/e2e/ hangs. Nothing happens locally. Using node 24.16.0. If i remove the node options, it works, but gives an enum error.

[jamesnw]

This looks good! Thanks! Can you fix the tests?

I would like to, but NODE_OPTIONS='--no-experimental-strip-types' playwright test tests/e2e/ hangs. Nothing happens locally. Using node 24.16.0. If i remove the node options, it works, but gives an enum error.

There's a specific Node version (v24.11) that works for the pinned version of Playwright that supports polyfillabel browsers. I added a note to CONTRIBUTING.md about running nvm use. That should get tests working locally.

[jpzwarte]

That should get tests working locally.

Thanks, i fixed the test. And another bug related to shadow-root + position-area.

[jamesnw]

LGTM- one idea you can take or leave. Good catch on the document.createElement bug- I'm wondering if you have looked at the other places that's used? That could be handled in a separate PR, though.

[jpzwarte]

I'm wondering if you have looked at the other places that's used? That could be handled in a separate PR, though.

I haven't; i noticed this one because position-area inside the shadow root was broken. Let's look at it in a separate PR.