From ba2deece0e9ef57aaa311e70f6316c3736ea9187 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Sat, 25 Jul 2026 12:17:07 +0200
Subject: [PATCH 01/23] Insert position-area mapping styles into each target's
 own root

`position-area` in a `:host` rule positions the shadow host, which lives
in the outer tree, but the generated `--pa-value-*` mapping rule was
inserted into the roots being polyfilled. A `<style>` in a shadow root
never matches that root's own host, so the values stayed undefined and
the host was left unpositioned.

Record the style container of each target while the rules are generated,
and insert the stylesheet into those containers instead. Targets inside a
polyfilled shadow root resolve to the same container as before.

Refs #444

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/parse.ts                 | 10 ++++
 src/transform.ts             | 30 ++++++++----
 src/utils.ts                 |  6 +++
 tests/e2e/shadow-dom.test.ts | 88 ++++++++++++++++++++++++++++++++++++
 4 files changed, 125 insertions(+), 9 deletions(-)

diff --git a/src/parse.ts b/src/parse.ts
index 6dd2944..ca4fea5 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -49,6 +49,7 @@ import {
   type DeclarationWithValue,
   generateCSS,
   getAST,
+  getRootStyleContainer,
   getSelectors,
   isAnchorFunction,
   type StyleData,
@@ -815,6 +816,7 @@ export async function parseCSS(
     changed: false,
     created: true,
     css: '',
+    containers: new Set(),
   };
   styleData.push(positionAreaMappingStyleElement);
 
@@ -867,6 +869,14 @@ export async function parseCSS(
           positionData.selectorUUID,
         );
         positionAreaMappingStyleElement.changed = true;
+        // These rules match the target (or the wrapper inserted next to it), so
+        // they belong in the target's own tree. That is not necessarily one of
+        // the roots being polyfilled: a `position-area` in a `:host` rule
+        // targets the shadow host, which lives outside the shadow root the
+        // declaration came from.
+        positionAreaMappingStyleElement.containers!.add(
+          getRootStyleContainer(targetEl),
+        );
         // Populate new data for each anchor/target combo
         validPositions[targetSel] = {
           ...validPositions[targetSel],
diff --git a/src/transform.ts b/src/transform.ts
index f594c38..d1b3132 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -33,7 +33,14 @@ export function transformCSS(
   roots?: AnchorPositioningRoot[],
 ) {
   const updatedStyleData: StyleData[] = [];
-  for (const { el, css, changed, created = false, sheet } of styleData) {
+  for (const {
+    el,
+    css,
+    changed,
+    created = false,
+    sheet,
+    containers,
+  } of styleData) {
     const updatedObject: StyleData = { el, css, changed: false, sheet };
     if (changed) {
       if (sheet) {
@@ -72,14 +79,19 @@ export function transformCSS(
           el.remove();
         } else {
           styleEl.setAttribute(POLYFILLED_STYLE_ATTRIBUTE, 'true');
-          // This is a new stylesheet (the position-area mapping styles). Its
-          // rules target wrapper elements that live inside the roots being
-          // polyfilled, so it must be inserted into each of those roots: a
-          // `<style>` in `document.head` does not apply inside a shadow root.
-          const containers = new Set(
-            (roots?.length ? roots : [document]).map(getRootStyleContainer),
-          );
-          for (const container of containers) {
+          // This is a new stylesheet (the position-area mapping styles). A
+          // `<style>` only applies within its own tree, so it is inserted into
+          // the tree of every element its rules match, as recorded while the
+          // rules were generated. Those are not always the roots being
+          // polyfilled: a `position-area` in a `:host` rule targets the shadow
+          // host, which lives in the outer tree. Fall back to the roots when
+          // no containers were recorded.
+          const styleContainers = containers?.size
+            ? containers
+            : new Set(
+                (roots?.length ? roots : [document]).map(getRootStyleContainer),
+              );
+          for (const container of styleContainers) {
             // If there are multiple roots, clone the element for each root
             const node = styleEl.isConnected
               ? styleEl
diff --git a/src/utils.ts b/src/utils.ts
index 56bdf84..1c3ef1f 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -73,6 +73,12 @@ export interface StyleData {
   // The constructed stylesheet this data came from, when the styles were
   // adopted via `adoptedStyleSheets` rather than a `<style>`/`<link>` element.
   sheet?: CSSStyleSheet;
+  // For a polyfill-created stylesheet: the containers it must be inserted into,
+  // one per tree holding an element its rules match. A `<style>` only applies
+  // within its own tree, and the elements these rules target do not always live
+  // in the roots being polyfilled — a `:host` rule styles the shadow host,
+  // which sits in the *outer* tree.
+  containers?: Set<ShadowRoot | HTMLHeadElement>;
 }
 
 // Reference to the native `CSSStyleSheet.prototype.replaceSync` so that the
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index e0f1f21..d55c1d1 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -216,6 +216,94 @@ test('positions every custom-element host sharing one constructed stylesheet', a
   }
 });
 
+test('positions a custom-element host with `position-area` in a `:host` rule', async ({
+  page,
+}) => {
+  // The `position-area` is declared in a `:host` rule, so the element it
+  // positions is the host, which lives in the *outer* tree rather than in the
+  // shadow root the declaration came from. The polyfill generates a stylesheet
+  // mapping the computed insets onto the target; it has to be inserted into the
+  // host's own tree, since a `<style>` inside the shadow root never matches the
+  // host. Without that, the `--pa-value-*` custom properties the target's
+  // insets read stay undefined and the host is left unpositioned.
+  await applyPolyfill(page);
+
+  // The page has already installed the adopted-stylesheet patches, so adopting
+  // a sheet into this element's shadow root queues a polyfill run for it.
+  await page.evaluate(() => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host {
+        padding: 0.5em;
+        position: absolute;
+        position-area: top;
+        white-space: nowrap;
+      }
+    `);
+
+    customElements.define(
+      'position-area-on-host',
+      class extends HTMLElement {
+        connectedCallback() {
+          // Moving the host into the `position-area` wrapper disconnects and
+          // reconnects it, so this runs more than once.
+          if (this.shadowRoot) return;
+
+          this.attachShadow({ mode: 'open' });
+          this.shadowRoot!.adoptedStyleSheets = [sheet];
+          this.shadowRoot!.innerHTML = '<slot></slot>';
+        }
+      },
+    );
+
+    const container = document.createElement('div');
+    container.id = 'position-area-on-host';
+    container.setAttribute('style', 'position: relative; margin-top: 5rem');
+    // Written as attribute text: the CSSOM drops `anchor-name` and
+    // `position-anchor` in a browser without native support, and the polyfill
+    // reads the `style` attribute.
+    container.innerHTML = `
+      <div class="anchor" style="anchor-name: --position-area-on-host">Anchor</div>
+      <position-area-on-host style="position-anchor: --position-area-on-host">Target</position-area-on-host>`;
+    document.body.append(container);
+  });
+
+  const anchor = page.locator('#position-area-on-host .anchor');
+  const target = page.locator('#position-area-on-host position-area-on-host');
+
+  // The wrapper is added by the queued polyfill run, with or without the
+  // mapping styles reaching the host's tree, so waiting on it does not mask the
+  // failure this test guards against.
+  await expect(
+    page.locator('#position-area-on-host POLYFILL-POSITION-AREA'),
+  ).toHaveCount(1);
+
+  // The generated mapping rules (keyed on the `data-pa-*` attributes the
+  // polyfill sets on the target or its wrapper) belong in the host's tree.
+  const mappingStylesInDocument = await page.evaluate(() =>
+    [...document.styleSheets].some((sheet) => {
+      try {
+        return [...sheet.cssRules].some((rule) =>
+          /data-pa-(wrapper|target)-for-/.test(rule.cssText),
+        );
+      } catch {
+        return false;
+      }
+    }),
+  );
+  expect(mappingStylesInDocument, 'mapping styles in the host tree').toBe(true);
+
+  const anchorBox = (await anchor.boundingBox())!;
+  const targetBox = (await target.boundingBox())!;
+
+  // `position-area: top` puts the target directly above the anchor.
+  expect(targetBox.y + targetBox.height).toBeCloseTo(anchorBox.y, 0);
+  expect(targetBox.x + targetBox.width / 2).toBeCloseTo(
+    anchorBox.x + anchorBox.width / 2,
+    0,
+  );
+});
+
 test('anchors to a pseudo-element inside a shadow root', async ({ page }) => {
   // `#shadow-pseudo-anchor::before` (a block, 100px tall) is the anchor; the
   // target uses `top: anchor(bottom)`. To measure a pseudo-element the polyfill

From 21caf74f1aa450d4617bcccb4e65bf418df8419c Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Sat, 25 Jul 2026 13:57:51 +0200
Subject: [PATCH 02/23] Fix fetchInlineStyles

---
 src/fetch.ts                    | 34 +++++++++++++++++++---------
 tests/e2e/position-area.test.ts | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/fetch.ts b/src/fetch.ts
index 6e86ef3..4edde7f 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid/non-secure';
 
-import { POLYFILLED_STYLE_ATTRIBUTE } from './cascade.js';
+import { POLYFILLED_STYLE_ATTRIBUTE, SHIFTED_PROPERTIES } from './cascade.js';
 import { querySelectorAllRoots } from './dom.js';
 import {
   type AnchorPositioningRoot,
@@ -63,8 +63,26 @@ async function fetchLinkedStylesheets(
   return results.filter((loaded) => loaded !== null);
 }
 
-const ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY = '[style*="anchor"]';
-const ELEMENTS_WITH_INLINE_POSITION_AREA = '[style*="position-area"]';
+// Inline styles are collected so that `cascadeCSS` can shift their declarations
+// into custom properties, like it does for the rest of the CSS. That has to
+// cover every property the polyfill later reads back through
+// `getCSSPropertyValue` — insets, margins, sizing, padding, self-alignment,
+// `position-area` — and not just the anchor-specific ones: a target can take
+// its `position-area` from a stylesheet while setting its margin inline.
+// `anchor` is matched on its own as well, for `anchor()`/`anchor-size()` values.
+// Built on first use rather than at module evaluation: `cascade.js` and this
+// module are part of an import cycle, so `SHIFTED_PROPERTIES` is not
+// necessarily initialized yet when this module is evaluated.
+let inlineAnchorStylesQuery: string | undefined;
+function elementsWithInlineAnchorStylesQuery() {
+  inlineAnchorStylesQuery ??= [
+    '[style*="anchor"]',
+    ...Object.keys(SHIFTED_PROPERTIES).map(
+      (property) => `[style*="${property}"]`,
+    ),
+  ].join(',');
+  return inlineAnchorStylesQuery;
+}
 // Searches for all elements with inline style attributes that include `anchor`.
 // For each element found, adds a new 'data-has-inline-styles' attribute with a
 // random UUID value, and then formats the styles in the same manner as CSS from
@@ -74,16 +92,10 @@ function fetchInlineStyles(elements?: HTMLElement[]) {
     ? elements.filter(
         (el) =>
           el instanceof HTMLElement &&
-          (el.matches(ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY) ||
-            el.matches(ELEMENTS_WITH_INLINE_POSITION_AREA)),
+          el.matches(elementsWithInlineAnchorStylesQuery()),
       )
     : Array.from(
-        document.querySelectorAll(
-          [
-            ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY,
-            ELEMENTS_WITH_INLINE_POSITION_AREA,
-          ].join(','),
-        ),
+        document.querySelectorAll(elementsWithInlineAnchorStylesQuery()),
       );
   const inlineStyles: Partial<StyleData>[] = [];
 
diff --git a/tests/e2e/position-area.test.ts b/tests/e2e/position-area.test.ts
index 113a749..af0da37 100644
--- a/tests/e2e/position-area.test.ts
+++ b/tests/e2e/position-area.test.ts
@@ -393,6 +393,46 @@ test.describe('with `positionAreaContainingBlock: auto`', () => {
     ).toHaveCount(1);
   });
 
+  test('wraps a target whose containing-block-dependent style is inline', async ({
+    page,
+  }) => {
+    // Inline styles are shifted into custom properties like the rest of the
+    // CSS, so a target that takes its `position-area` from a stylesheet while
+    // setting a containing-block-dependent style inline is still recognised as
+    // needing the wrapper. Without the shift the inline `padding-right: 50%`
+    // reads back as empty and the target is positioned directly.
+    await page.evaluate(async () => {
+      // Resolved by the Vite dev server at runtime; the indirection keeps `tsc`
+      // and the import linter from trying to resolve it statically.
+      const fnEntry = '/src/index-fn.ts';
+      const { default: polyfill } = await import(fnEntry);
+
+      const style = document.createElement('style');
+      style.textContent = `
+        #inline-shifted .anchor { anchor-name: --inline-shifted; }
+        #inline-shifted .target {
+          position: absolute;
+          position-anchor: --inline-shifted;
+          position-area: top;
+        }`;
+      document.head.append(style);
+
+      const container = document.createElement('div');
+      container.id = 'inline-shifted';
+      container.setAttribute('style', 'position: relative');
+      container.innerHTML = `
+        <div class="anchor">Anchor</div>
+        <div class="target" style="padding-right: 50%">Target</div>`;
+      document.body.append(container);
+
+      await polyfill({ positionAreaContainingBlock: 'auto' });
+    });
+
+    await expect(
+      page.locator('#inline-shifted polyfill-position-area'),
+    ).toHaveCount(1);
+  });
+
   test('positions a wrapped target correctly', async ({ page }) => {
     await applyPolyfill(page);
     const section = page.locator('#spanleft-top');

From 5efedde5765c9ef05a7c99c31f492ad3e51a3a36 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Mon, 27 Jul 2026 12:03:02 +0200
Subject: [PATCH 03/23] Add example

---
 shadow-dom.html              | 97 ++++++++++++++++++++++++++++++++++++
 tests/e2e/shadow-dom.test.ts | 16 +++---
 2 files changed, 106 insertions(+), 7 deletions(-)

diff --git a/shadow-dom.html b/shadow-dom.html
index b835fb9..8ad0cb0 100644
--- a/shadow-dom.html
+++ b/shadow-dom.html
@@ -97,6 +97,39 @@
           }
         }
         customElements.define('position-anchor-on-host', PositionAnchorOnHost);
+
+        // `position-area` in a `:host` rule positions the shadow *host*, which
+        // lives in the outer tree rather than in the shadow root the rule came
+        // from. The styles the polyfill generates to map the computed insets
+        // onto the target have to be inserted into that outer tree to match it.
+        const positionAreaOnHostSheet = new CSSStyleSheet();
+        positionAreaOnHostSheet.replaceSync(`
+          :host {
+            --element-color: var(--target, var(--outer-anchored));
+            background: var(--element-color);
+            border: thin solid var(--border);
+            border-radius: var(--radius-1);
+            color: white;
+            font-weight: bold;
+            padding: 0.5em;
+            white-space: nowrap;
+            position: absolute;
+            position-area: top;
+          }
+        `);
+
+        class PositionAreaOnHost extends HTMLElement {
+          connectedCallback() {
+            // Moving the host into the `position-area` wrapper disconnects and
+            // reconnects it, so this runs more than once.
+            if (this.shadowRoot) return;
+
+            this.attachShadow({ mode: 'open' });
+            this.shadowRoot.adoptedStyleSheets = [positionAreaOnHostSheet];
+            this.shadowRoot.innerHTML = '<slot></slot>';
+          }
+        }
+        customElements.define('position-area-on-host', PositionAreaOnHost);
       }
 
       const btn = document.getElementById('apply-polyfill');
@@ -478,6 +511,70 @@ <h2>
 }
 customElements.define("position-anchor-on-host", PositionAnchorOnHost);
 &lt;/script&gt;
+</code></pre>
+    </section>
+    <section id="position-area-on-host" class="demo-item">
+      <h2>
+        <a href="#position-area-on-host" aria-hidden="true">🔗</a>
+        Works when a custom element host has <code>position-area</code>
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div
+          class="anchor"
+          style="
+            anchor-name: --position-area-on-host;
+            margin-block-start: calc(1lh + 1rem);
+          "
+        >
+          Anchor
+        </div>
+        <position-area-on-host style="position-anchor: --position-area-on-host"
+          >Target</position-area-on-host
+        >
+      </div>
+      <div class="note">
+        <p>With polyfill applied: Target sits directly above the Anchor.</p>
+        <p>
+          The <code>position-area</code> is declared in a
+          <code>:host</code> rule, so the element it positions is the host
+          (<code>&lt;position-area-on-host&gt;</code>), which lives in the outer
+          tree rather than in the shadow root the rule came from. The styles the
+          polyfill generates to map the computed insets onto the target are
+          inserted into the host's own tree; a <code>&lt;style&gt;</code> inside
+          the shadow root would never match the host.
+        </p>
+      </div>
+
+      <pre><code class="language-html"
+>&lt;div class="anchor" style="anchor-name: --position-area-on-host"&gt;Anchor&lt;/div&gt;
+&lt;position-area-on-host style="position-anchor: --position-area-on-host"&gt;Target&lt;/position-area-on-host&gt;
+&lt;script&gt;
+&lt;!-- Load the shadow entrypoint before defining custom elements,
+so the replaceSync and adoptedStyleSheets patches are installed
+before any connectedCallback runs. --&gt;
+import { patchAndPolyfillConstructedStylesheets } from '@oddbird/css-anchor-positioning/fn';
+patchAndPolyfillConstructedStylesheets();
+
+class PositionAreaOnHost extends HTMLElement {
+  connectedCallback() {
+    // Moving the host into the position-area wrapper reconnects it.
+    if (this.shadowRoot) return;
+
+    this.attachShadow({ mode: "open" });
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host {
+        position: absolute;
+        position-area: top;
+      }
+    `);
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    this.shadowRoot.innerHTML = "&lt;slot&gt;&lt;/slot&gt;";
+  }
+}
+customElements.define("position-area-on-host", PositionAreaOnHost);
+&lt;/script&gt;
 </code></pre>
     </section>
     <section id="sponsor">
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index d55c1d1..ed9ff7f 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -242,7 +242,7 @@ test('positions a custom-element host with `position-area` in a `:host` rule', a
     `);
 
     customElements.define(
-      'position-area-on-host',
+      'position-area-host-fixture',
       class extends HTMLElement {
         connectedCallback() {
           // Moving the host into the `position-area` wrapper disconnects and
@@ -257,25 +257,27 @@ test('positions a custom-element host with `position-area` in a `:host` rule', a
     );
 
     const container = document.createElement('div');
-    container.id = 'position-area-on-host';
+    container.id = 'position-area-host-fixture';
     container.setAttribute('style', 'position: relative; margin-top: 5rem');
     // Written as attribute text: the CSSOM drops `anchor-name` and
     // `position-anchor` in a browser without native support, and the polyfill
     // reads the `style` attribute.
     container.innerHTML = `
-      <div class="anchor" style="anchor-name: --position-area-on-host">Anchor</div>
-      <position-area-on-host style="position-anchor: --position-area-on-host">Target</position-area-on-host>`;
+      <div class="anchor" style="anchor-name: --position-area-host-fixture">Anchor</div>
+      <position-area-host-fixture style="position-anchor: --position-area-host-fixture">Target</position-area-host-fixture>`;
     document.body.append(container);
   });
 
-  const anchor = page.locator('#position-area-on-host .anchor');
-  const target = page.locator('#position-area-on-host position-area-on-host');
+  const anchor = page.locator('#position-area-host-fixture .anchor');
+  const target = page.locator(
+    '#position-area-host-fixture position-area-host-fixture',
+  );
 
   // The wrapper is added by the queued polyfill run, with or without the
   // mapping styles reaching the host's tree, so waiting on it does not mask the
   // failure this test guards against.
   await expect(
-    page.locator('#position-area-on-host POLYFILL-POSITION-AREA'),
+    page.locator('#position-area-host-fixture POLYFILL-POSITION-AREA'),
   ).toHaveCount(1);
 
   // The generated mapping rules (keyed on the `data-pa-*` attributes the

From 5c19e336efe8a2e85afb8a08d5203a4e1a7a4783 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Mon, 27 Jul 2026 12:21:12 +0200
Subject: [PATCH 04/23] Add example

---
 position-area.html              | 23 ++++++++++++++
 public/position-area-page.css   |  6 ++++
 tests/e2e/position-area.test.ts | 53 ++++++++++++---------------------
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/position-area.html b/position-area.html
index fcb1aba..d72e820 100644
--- a/position-area.html
+++ b/position-area.html
@@ -183,6 +183,29 @@ <h2>
       </div>
     </section>
 
+    <section class="position-area-demo-item" id="inline-shifted">
+      <h2>
+        <a href="#inline-shifted" aria-hidden="true">🔗</a>
+        <code>span-left top, padding set inline ✅</code>
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target inline-shifted" style="padding-right: 50%">
+          Target with longer content
+        </div>
+      </div>
+      <p>
+        The same as the demo above, except that
+        <code>padding-right: 50%</code> is an inline style rather than a
+        stylesheet rule. Inline styles are shifted into custom properties like
+        the rest of the CSS, so <a href="?auto"><code>auto</code> mode</a> can
+        still see the percentage padding and wraps the target. Without that
+        shift the padding reads back as empty, the target is positioned
+        directly, and the padding resolves against the original containing block
+        instead of the <code>position-area</code> cell.
+      </p>
+    </section>
+
     <section class="position-area-demo-item" id="nested-alignment">
       <h2>
         <a href="#nested-alignment" aria-hidden="true">🔗</a>
diff --git a/public/position-area-page.css b/public/position-area-page.css
index 2f282f9..a676ab6 100644
--- a/public/position-area-page.css
+++ b/public/position-area-page.css
@@ -67,6 +67,12 @@
   position-area: span-left top;
 }
 
+/* Same as `.spanleft-top`, but the containing-block-dependent padding is set
+ * as an inline style on the target instead. */
+.target.inline-shifted {
+  position-area: span-left top;
+}
+
 .target.spanall-left {
   position-area: span-all left;
 }
diff --git a/tests/e2e/position-area.test.ts b/tests/e2e/position-area.test.ts
index af0da37..570800d 100644
--- a/tests/e2e/position-area.test.ts
+++ b/tests/e2e/position-area.test.ts
@@ -396,41 +396,26 @@ test.describe('with `positionAreaContainingBlock: auto`', () => {
   test('wraps a target whose containing-block-dependent style is inline', async ({
     page,
   }) => {
-    // Inline styles are shifted into custom properties like the rest of the
-    // CSS, so a target that takes its `position-area` from a stylesheet while
-    // setting a containing-block-dependent style inline is still recognised as
-    // needing the wrapper. Without the shift the inline `padding-right: 50%`
-    // reads back as empty and the target is positioned directly.
-    await page.evaluate(async () => {
-      // Resolved by the Vite dev server at runtime; the indirection keeps `tsc`
-      // and the import linter from trying to resolve it statically.
-      const fnEntry = '/src/index-fn.ts';
-      const { default: polyfill } = await import(fnEntry);
-
-      const style = document.createElement('style');
-      style.textContent = `
-        #inline-shifted .anchor { anchor-name: --inline-shifted; }
-        #inline-shifted .target {
-          position: absolute;
-          position-anchor: --inline-shifted;
-          position-area: top;
-        }`;
-      document.head.append(style);
-
-      const container = document.createElement('div');
-      container.id = 'inline-shifted';
-      container.setAttribute('style', 'position: relative');
-      container.innerHTML = `
-        <div class="anchor">Anchor</div>
-        <div class="target" style="padding-right: 50%">Target</div>`;
-      document.body.append(container);
-
-      await polyfill({ positionAreaContainingBlock: 'auto' });
-    });
+    // `#inline-shifted .target` takes its `position-area` from a stylesheet and
+    // sets `padding-right: 50%` inline. Inline styles are shifted into custom
+    // properties like the rest of the CSS, so the percentage padding is still
+    // seen here and the target is wrapped. Without the shift it reads back as
+    // empty and the target is positioned directly.
+    await applyPolyfill(page);
 
-    await expect(
-      page.locator('#inline-shifted polyfill-position-area'),
-    ).toHaveCount(1);
+    const section = page.locator('#inline-shifted');
+    const targetWrapper = section.locator('polyfill-position-area');
+    await expect(targetWrapper).toHaveCount(1);
+
+    // The reason it needs the wrapper: the padding has to resolve against the
+    // position-area cell, not the original parent.
+    const wrapperContentWidth = await targetWrapper.evaluate(
+      (el) => el.clientWidth,
+    );
+    const paddingRight = await section
+      .locator('.target')
+      .evaluate((el) => parseFloat(getComputedStyle(el).paddingRight));
+    expect(paddingRight).toBeCloseTo(wrapperContentWidth / 2, 0);
   });
 
   test('positions a wrapped target correctly', async ({ page }) => {

From d61fb3648118ec95af908f0d7700bde4813d467b Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Tue, 28 Jul 2026 12:28:32 +0200
Subject: [PATCH 05/23] Replace `style*=` queries with a more performant
 approach

---
 src/fetch.ts | 74 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/fetch.ts b/src/fetch.ts
index 4edde7f..1bc9879 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -70,49 +70,59 @@ async function fetchLinkedStylesheets(
 // `position-area` — and not just the anchor-specific ones: a target can take
 // its `position-area` from a stylesheet while setting its margin inline.
 // `anchor` is matched on its own as well, for `anchor()`/`anchor-size()` values.
+//
+// Matching tests the `style` attribute against a single regex rather than
+// handing `querySelectorAll` one `[style*="..."]` clause per property. Engines
+// do not bucket attribute-substring selectors by attribute presence, so a
+// ~50-clause query runs every substring test against every element in the
+// document; querying `[style]` and filtering here is an order of magnitude
+// faster, and scales with the number of styled elements rather than with the
+// size of the document.
+//
+// A term that contains another term is redundant -- `margin` already matches
+// `margin-inline-start`, `anchor` already matches `anchor-name` -- so only the
+// shortest distinct ones are kept.
+//
 // Built on first use rather than at module evaluation: `cascade.js` and this
 // module are part of an import cycle, so `SHIFTED_PROPERTIES` is not
 // necessarily initialized yet when this module is evaluated.
-let inlineAnchorStylesQuery: string | undefined;
-function elementsWithInlineAnchorStylesQuery() {
-  inlineAnchorStylesQuery ??= [
-    '[style*="anchor"]',
-    ...Object.keys(SHIFTED_PROPERTIES).map(
-      (property) => `[style*="${property}"]`,
-    ),
-  ].join(',');
-  return inlineAnchorStylesQuery;
+let inlineAnchorStylesRegex: RegExp | undefined;
+function hasInlineAnchorStyles(el: HTMLElement) {
+  if (!inlineAnchorStylesRegex) {
+    const terms = ['anchor', ...Object.keys(SHIFTED_PROPERTIES)];
+    inlineAnchorStylesRegex = new RegExp(
+      terms
+        .filter(
+          (term) =>
+            !terms.some((other) => other !== term && term.includes(other)),
+        )
+        .join('|'),
+    );
+  }
+  return inlineAnchorStylesRegex.test(el.getAttribute('style') ?? '');
 }
 // Searches for all elements with inline style attributes that include `anchor`.
 // For each element found, adds a new 'data-has-inline-styles' attribute with a
 // random UUID value, and then formats the styles in the same manner as CSS from
 // style tags.
 function fetchInlineStyles(elements?: HTMLElement[]) {
-  const elementsWithInlineAnchorStyles: HTMLElement[] = elements
-    ? elements.filter(
-        (el) =>
-          el instanceof HTMLElement &&
-          el.matches(elementsWithInlineAnchorStylesQuery()),
-      )
-    : Array.from(
-        document.querySelectorAll(elementsWithInlineAnchorStylesQuery()),
-      );
+  const elementsWithInlineAnchorStyles: HTMLElement[] = (
+    elements ?? Array.from(document.querySelectorAll<HTMLElement>('[style]'))
+  ).filter((el) => el instanceof HTMLElement && hasInlineAnchorStyles(el));
   const inlineStyles: Partial<StyleData>[] = [];
 
-  elementsWithInlineAnchorStyles
-    .filter((el) => el instanceof HTMLElement)
-    .forEach((el) => {
-      const dataAttribute = 'data-has-inline-styles';
-      // Reuse an existing id rather than minting a new one each run: a
-      // concurrent run (e.g. another shadow root being polyfilled) may already
-      // be relying on this element's id in an anchor selector, and re-stamping
-      // it would invalidate that selector.
-      const selector = el.getAttribute(dataAttribute) ?? nanoid(12);
-      el.setAttribute(dataAttribute, selector);
-      const styles = el.getAttribute('style');
-      const css = `[${dataAttribute}="${selector}"] { ${styles} }`;
-      inlineStyles.push({ el, css });
-    });
+  elementsWithInlineAnchorStyles.forEach((el) => {
+    const dataAttribute = 'data-has-inline-styles';
+    // Reuse an existing id rather than minting a new one each run: a
+    // concurrent run (e.g. another shadow root being polyfilled) may already
+    // be relying on this element's id in an anchor selector, and re-stamping
+    // it would invalidate that selector.
+    const selector = el.getAttribute(dataAttribute) ?? nanoid(12);
+    el.setAttribute(dataAttribute, selector);
+    const styles = el.getAttribute('style');
+    const css = `[${dataAttribute}="${selector}"] { ${styles} }`;
+    inlineStyles.push({ el, css });
+  });
 
   return inlineStyles;
 }

From 4f2f36f9e28d1f30bab503a964dd50e0b5571aca Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Tue, 28 Jul 2026 13:42:13 +0200
Subject: [PATCH 06/23] Simplify container handling

---
 src/transform.ts             | 18 +++++-------------
 tests/unit/transform.test.ts | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/transform.ts b/src/transform.ts
index d1b3132..95e2a97 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,10 +1,6 @@
 import { POLYFILLED_STYLE_ATTRIBUTE } from './cascade.js';
 import type { AnchorPositioningRoot } from './polyfill.js';
-import {
-  getRootStyleContainer,
-  type StyleData,
-  writeAdoptedStylesheet,
-} from './utils.js';
+import { type StyleData, writeAdoptedStylesheet } from './utils.js';
 
 // This is a list of non-global attributes that apply to link elements but do
 // not apply to style elements. These should be removed when converting from a
@@ -84,14 +80,10 @@ export function transformCSS(
           // the tree of every element its rules match, as recorded while the
           // rules were generated. Those are not always the roots being
           // polyfilled: a `position-area` in a `:host` rule targets the shadow
-          // host, which lives in the outer tree. Fall back to the roots when
-          // no containers were recorded.
-          const styleContainers = containers?.size
-            ? containers
-            : new Set(
-                (roots?.length ? roots : [document]).map(getRootStyleContainer),
-              );
-          for (const container of styleContainers) {
+          // host, which lives in the outer tree. An empty set means no rules
+          // were generated -- `css`, `changed` and `containers` are populated
+          // together -- so there is nothing to insert.
+          for (const container of containers ?? []) {
             // If there are multiple roots, clone the element for each root
             const node = styleEl.isConnected
               ? styleEl
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 6914adf..2922acb 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -80,6 +80,9 @@ describe('transformCSS', () => {
         css: 'html { margin: 0; }',
         changed: true,
         created: true,
+        // `parseCSS` records the style container of every element the created
+        // rules match, and only marks the sheet `changed` once it has.
+        containers: new Set([document.head]),
       },
     ];
     transformCSS(styleData, undefined);
@@ -93,4 +96,20 @@ describe('transformCSS', () => {
     );
     expect(createdStyleElement.textContent).toBe('html { margin: 0; }');
   });
+
+  it('does not insert created styles when no containers were recorded', () => {
+    document.head.innerHTML = ``;
+    const styleData = [
+      {
+        el: document.createElement('link'),
+        css: '',
+        changed: true,
+        created: true,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
+      },
+    ];
+    transformCSS(styleData, undefined);
+
+    expect(document.querySelector('style')).toBe(null);
+  });
 });

From 9c989c6ede437dce662e336d529dabb7bc06a120 Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Tue, 28 Jul 2026 14:22:56 +0200
Subject: [PATCH 07/23] Make containers required

---
 src/transform.ts             |  8 +++++++-
 src/utils.ts                 | 13 +++++++------
 tests/helpers.ts             |  2 +-
 tests/unit/cascade.test.ts   |  4 ++--
 tests/unit/fallback.test.ts  |  5 ++++-
 tests/unit/transform.test.ts | 25 ++++++++++++++++++++++---
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/transform.ts b/src/transform.ts
index 95e2a97..1fd59e2 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -37,7 +37,13 @@ export function transformCSS(
     sheet,
     containers,
   } of styleData) {
-    const updatedObject: StyleData = { el, css, changed: false, sheet };
+    const updatedObject: StyleData = {
+      el,
+      css,
+      changed: false,
+      sheet,
+      containers,
+    };
     if (changed) {
       if (sheet) {
         // Handle constructed stylesheets adopted via `adoptedStyleSheets`.
diff --git a/src/utils.ts b/src/utils.ts
index 1c3ef1f..408a476 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -73,12 +73,13 @@ export interface StyleData {
   // The constructed stylesheet this data came from, when the styles were
   // adopted via `adoptedStyleSheets` rather than a `<style>`/`<link>` element.
   sheet?: CSSStyleSheet;
-  // For a polyfill-created stylesheet: the containers it must be inserted into,
-  // one per tree holding an element its rules match. A `<style>` only applies
-  // within its own tree, and the elements these rules target do not always live
-  // in the roots being polyfilled — a `:host` rule styles the shadow host,
-  // which sits in the *outer* tree.
-  containers?: Set<ShadowRoot | HTMLHeadElement>;
+  // The containers this stylesheet must be inserted into, one per tree holding
+  // an element its rules match. A `<style>` only applies within its own tree,
+  // and the elements the rules target do not always live in the roots being
+  // polyfilled — a `:host` rule styles the shadow host, which sits in the
+  // *outer* tree. Only consulted for polyfill-created stylesheets (`created`);
+  // an empty set for author styles, which are transformed in place.
+  containers: Set<ShadowRoot | HTMLHeadElement>;
 }
 
 // Reference to the native `CSSStyleSheet.prototype.replaceSync` so that the
diff --git a/tests/helpers.ts b/tests/helpers.ts
index da1718c..ca932e0 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -21,7 +21,7 @@ export const sampleBaseCSS = '.a { color: red; } .b { color: green; }';
  * Update a CSS string used in tests by running it through `cascadeCSS`.
  */
 export function cascadeCSSForTest(css: string) {
-  const styleObj: StyleData = { el: null!, css };
+  const styleObj: StyleData = { el: null!, css, containers: new Set() };
   cascadeCSS([styleObj]);
   return styleObj.css;
 }
diff --git a/tests/unit/cascade.test.ts b/tests/unit/cascade.test.ts
index 0ad13e2..bd7d679 100644
--- a/tests/unit/cascade.test.ts
+++ b/tests/unit/cascade.test.ts
@@ -77,7 +77,7 @@ describe('cascadeCSS', () => {
   it('adds insets with anchors as custom properties', async () => {
     const srcCSS = getSampleCSS('position-try-tactics');
     const styleData: StyleData[] = [
-      { css: srcCSS, el: document.createElement('div') },
+      { css: srcCSS, el: document.createElement('div'), containers: new Set() },
     ];
     const cascadeCausedChanges = await cascadeCSS(styleData);
     expect(cascadeCausedChanges).toBe(true);
@@ -88,7 +88,7 @@ describe('cascadeCSS', () => {
   it('returns false if no changes were made', async () => {
     const srcCSS = `.my-class { color: blue; }`;
     const styleData: StyleData[] = [
-      { css: srcCSS, el: document.createElement('div') },
+      { css: srcCSS, el: document.createElement('div'), containers: new Set() },
     ];
     const cascadeCausedChanges = await cascadeCSS(styleData);
     expect(cascadeCausedChanges).toBe(false);
diff --git a/tests/unit/fallback.test.ts b/tests/unit/fallback.test.ts
index cda4036..59773ae 100644
--- a/tests/unit/fallback.test.ts
+++ b/tests/unit/fallback.test.ts
@@ -438,7 +438,10 @@ describe('fallback', () => {
         `<div id="a" style="${propWrap('bottom')}:10px"></div>` +
         `<div id="b" style="${propWrap('bottom')}:20px"></div>`;
       const styleData: StyleData[] = [
-        { css: '#a, #b { position-try-fallbacks: flip-block; }' },
+        {
+          css: '#a, #b { position-try-fallbacks: flip-block; }',
+          containers: new Set(),
+        },
       ];
 
       const { validPositions } = parsePositionFallbacks(styleData);
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 2922acb..33568a4 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -17,17 +17,29 @@ describe('transformCSS', () => {
     const div = document.getElementById('div') as HTMLDivElement;
     const div2 = document.getElementById('div2') as HTMLDivElement;
     const styleData = [
-      { el: link, css: 'html { margin: 0; }', changed: true },
-      { el: style, css: 'html { padding: 0; }', changed: true },
+      {
+        el: link,
+        css: 'html { margin: 0; }',
+        changed: true,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
+      },
+      {
+        el: style,
+        css: 'html { padding: 0; }',
+        changed: true,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
+      },
       {
         el: div,
         css: '[data-has-inline-styles="key"]{color:blue;}',
         changed: true,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
       {
         el: div2,
         css: '[data-has-inline-styles="key2"]{color:blue;}',
         changed: false,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
     ];
     const inlineStyles = new Map();
@@ -56,7 +68,14 @@ describe('transformCSS', () => {
       <link id="the-link" media="screen" title="stylish" rel="stylesheet" href="/sample.css"/>
     `;
     const link = document.querySelector('link') as HTMLLinkElement;
-    const styleData = [{ el: link, css: 'html { margin: 0; }', changed: true }];
+    const styleData = [
+      {
+        el: link,
+        css: 'html { margin: 0; }',
+        changed: true,
+        containers: new Set<ShadowRoot | HTMLHeadElement>(),
+      },
+    ];
     const inlineStyles = new Map();
     const initialStyleElement = document.querySelector('style');
     expect(initialStyleElement).toBe(null);

From 055cc5e03d7dcedba239548b8fc339a329795f50 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Mon, 3 Aug 2026 13:22:47 -0400
Subject: [PATCH 08/23] Remove unneeded fallbacks

---
 src/parse.ts     | 2 +-
 src/transform.ts | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/parse.ts b/src/parse.ts
index ca4fea5..4015cd2 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -874,7 +874,7 @@ export async function parseCSS(
         // the roots being polyfilled: a `position-area` in a `:host` rule
         // targets the shadow host, which lives outside the shadow root the
         // declaration came from.
-        positionAreaMappingStyleElement.containers!.add(
+        positionAreaMappingStyleElement.containers.add(
           getRootStyleContainer(targetEl),
         );
         // Populate new data for each anchor/target combo
diff --git a/src/transform.ts b/src/transform.ts
index 1fd59e2..413c98a 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -86,10 +86,8 @@ export function transformCSS(
           // the tree of every element its rules match, as recorded while the
           // rules were generated. Those are not always the roots being
           // polyfilled: a `position-area` in a `:host` rule targets the shadow
-          // host, which lives in the outer tree. An empty set means no rules
-          // were generated -- `css`, `changed` and `containers` are populated
-          // together -- so there is nothing to insert.
-          for (const container of containers ?? []) {
+          // host, which lives in the outer tree.
+          for (const container of containers) {
             // If there are multiple roots, clone the element for each root
             const node = styleEl.isConnected
               ? styleEl

From 56adbe3b86b9e93046893cbc550c1bd95d9f6ed2 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Mon, 3 Aug 2026 13:49:32 -0400
Subject: [PATCH 09/23] Documentation

---
 src/fetch.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/fetch.ts b/src/fetch.ts
index 1bc9879..7e7d7a3 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -87,6 +87,14 @@ async function fetchLinkedStylesheets(
 // module are part of an import cycle, so `SHIFTED_PROPERTIES` is not
 // necessarily initialized yet when this module is evaluated.
 let inlineAnchorStylesRegex: RegExp | undefined;
+/**
+ * Checks if the given element has inline styles used by the polyfill, including
+ * margin, inset, sizing, padding, self-alignment, `position-area`, and anchor
+ * properties.
+ *
+ * @param el The element to check.
+ * @returns True if the element has inline styles used by the polyfill.
+ */
 function hasInlineAnchorStyles(el: HTMLElement) {
   if (!inlineAnchorStylesRegex) {
     const terms = ['anchor', ...Object.keys(SHIFTED_PROPERTIES)];

From f373402384c6f0a907d962f6a31b3489258fb4a0 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Mon, 10 Aug 2026 14:21:04 -0400
Subject: [PATCH 10/23] Add AgentScan workflow

---
 .github/workflows/agentscan.yml | 36 +++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 .github/workflows/agentscan.yml

diff --git a/.github/workflows/agentscan.yml b/.github/workflows/agentscan.yml
new file mode 100644
index 0000000..158023e
--- /dev/null
+++ b/.github/workflows/agentscan.yml
@@ -0,0 +1,36 @@
+name: AgentScan
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+  issues:
+    types:
+      - opened
+
+jobs:
+  agentscan:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+      contents: read
+    steps:
+      - name: AgentScan
+        uses: MatteoGabriele/agentscan-action@c7d61446e7aece6bdd3edcee4558bbfc0392615e
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          auto-close: true
+          message-mixed: |
+            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            If this was flagged in error, we apologize.
+            Please reopen the pull request and we will manually review it.
+          message-automation: |
+            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            If this was flagged in error, we apologize.
+            Please reopen the pull request and we will manually review it.
+          message-community-flagged: |
+            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            If this was flagged in error, we apologize.
+            Please reopen the pull request and we will manually review it.
\ No newline at end of file

From 99d0f6567a943b0b66616ddf4124b4b86b9e12ee Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Mon, 10 Aug 2026 14:24:22 -0400
Subject: [PATCH 11/23] Lint

---
 .github/workflows/agentscan.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/agentscan.yml b/.github/workflows/agentscan.yml
index 158023e..7a750a0 100644
--- a/.github/workflows/agentscan.yml
+++ b/.github/workflows/agentscan.yml
@@ -33,4 +33,4 @@ jobs:
           message-community-flagged: |
             This pull request was flagged as potentially not having a human behind it, and so it was closed.
             If this was flagged in error, we apologize.
-            Please reopen the pull request and we will manually review it.
\ No newline at end of file
+            Please reopen the pull request and we will manually review it.

From 04606cd04af9b71eb12ea4fad58313a90ae7e1c0 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 12 Aug 2026 16:16:30 -0400
Subject: [PATCH 12/23] review

---
 .github/workflows/agentscan.yml | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/agentscan.yml b/.github/workflows/agentscan.yml
index 7a750a0..22b0940 100644
--- a/.github/workflows/agentscan.yml
+++ b/.github/workflows/agentscan.yml
@@ -1,14 +1,22 @@
 name: AgentScan
 
 on:
+  # Do NOT add actions/checkout to this workflow: pull_request_target runs
+  # with write permissions, so checking out PR code would allow a malicious
+  # PR to run arbitrary code with access to the token.
+  # Only `opened` (not `reopened`): a flagged PR/issue that gets reopened
+  # stays open for manual review, as the flag messages promise.
   pull_request_target:
     types:
       - opened
-      - reopened
   issues:
     types:
       - opened
 
+concurrency:
+  group: agentscan-${{ github.event.pull_request.number || github.event.issue.number }}
+  cancel-in-progress: true
+
 jobs:
   agentscan:
     runs-on: ubuntu-latest
@@ -18,19 +26,23 @@ jobs:
       contents: read
     steps:
       - name: AgentScan
-        uses: MatteoGabriele/agentscan-action@c7d61446e7aece6bdd3edcee4558bbfc0392615e
+        uses: MatteoGabriele/agentscan-action@e02ef270c024bfad3541b2a71619c3c9f20b3312 # v2.2.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+          scan-issues: true
           auto-close: true
+          trusted-author-associations: '["owner", "member", "collaborator"]'
+          # Only `automation` and community-flagged accounts are auto-closed
+          # (the action's default); `mixed` is labeled and left open.
           message-mixed: |
-            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            This was flagged as potentially not having a human behind it.
             If this was flagged in error, we apologize.
-            Please reopen the pull request and we will manually review it.
+            A maintainer will review it manually.
           message-automation: |
-            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            This was flagged as potentially not having a human behind it, and so it was closed.
             If this was flagged in error, we apologize.
-            Please reopen the pull request and we will manually review it.
+            Please reopen it and we will manually review it.
           message-community-flagged: |
-            This pull request was flagged as potentially not having a human behind it, and so it was closed.
+            This was flagged as potentially not having a human behind it, and so it was closed.
             If this was flagged in error, we apologize.
-            Please reopen the pull request and we will manually review it.
+            Please reopen it and we will manually review it.

From 07390d13eecb06532436881127f2e516ac87279a Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 12 Aug 2026 16:21:34 -0400
Subject: [PATCH 13/23] allow manually triggering a scan

---
 .github/workflows/agentscan.yml | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.github/workflows/agentscan.yml b/.github/workflows/agentscan.yml
index 22b0940..cf7eb35 100644
--- a/.github/workflows/agentscan.yml
+++ b/.github/workflows/agentscan.yml
@@ -6,12 +6,16 @@ on:
   # PR to run arbitrary code with access to the token.
   # Only `opened` (not `reopened`): a flagged PR/issue that gets reopened
   # stays open for manual review, as the flag messages promise.
+  # To trigger a scan manually, add the `agentscan:scan` label to any PR
+  # or issue (remove and re-add it to re-scan).
   pull_request_target:
     types:
       - opened
+      - labeled
   issues:
     types:
       - opened
+      - labeled
 
 concurrency:
   group: agentscan-${{ github.event.pull_request.number || github.event.issue.number }}
@@ -19,6 +23,9 @@ concurrency:
 
 jobs:
   agentscan:
+    # On `labeled` events, only run for the manual-trigger label (the scan
+    # itself adds `agentscan:*` labels, which must not re-trigger it).
+    if: github.event.action != 'labeled' || github.event.label.name == 'agentscan:scan'
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write

From 647940e770d00cac1aacce21cae360085cb7f0ce Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 13 Aug 2026 16:08:09 -0400
Subject: [PATCH 14/23] Make containers optionally undefined

---
 src/parse.ts             | 2 +-
 src/transform.ts         | 2 +-
 src/utils.ts             | 2 +-
 tests/unit/parse.test.ts | 2 --
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/parse.ts b/src/parse.ts
index 4015cd2..df3519f 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -874,7 +874,7 @@ export async function parseCSS(
         // the roots being polyfilled: a `position-area` in a `:host` rule
         // targets the shadow host, which lives outside the shadow root the
         // declaration came from.
-        positionAreaMappingStyleElement.containers.add(
+        positionAreaMappingStyleElement.containers?.add(
           getRootStyleContainer(targetEl),
         );
         // Populate new data for each anchor/target combo
diff --git a/src/transform.ts b/src/transform.ts
index 413c98a..10d25d0 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -87,7 +87,7 @@ export function transformCSS(
           // rules were generated. Those are not always the roots being
           // polyfilled: a `position-area` in a `:host` rule targets the shadow
           // host, which lives in the outer tree.
-          for (const container of containers) {
+          for (const container of containers ?? []) {
             // If there are multiple roots, clone the element for each root
             const node = styleEl.isConnected
               ? styleEl
diff --git a/src/utils.ts b/src/utils.ts
index 408a476..f6f696c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -79,7 +79,7 @@ export interface StyleData {
   // polyfilled — a `:host` rule styles the shadow host, which sits in the
   // *outer* tree. Only consulted for polyfill-created stylesheets (`created`);
   // an empty set for author styles, which are transformed in place.
-  containers: Set<ShadowRoot | HTMLHeadElement>;
+  containers?: Set<ShadowRoot | HTMLHeadElement>;
 }
 
 // Reference to the native `CSSStyleSheet.prototype.replaceSync` so that the
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
index d459c63..dec487e 100644
--- a/tests/unit/parse.test.ts
+++ b/tests/unit/parse.test.ts
@@ -1,5 +1,3 @@
-/* eslint-disable vitest/valid-expect */
-
 import { parseCSS } from '../../src/parse.js';
 import { type StyleData } from '../../src/utils.js';
 import {

From 705df42ec53f4dbb467cd7bfccb804884682bbbc Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 13 Aug 2026 16:22:33 -0400
Subject: [PATCH 15/23] Remove generated styles from the transformCSS process

---
 src/parse.ts                 | 25 ++++++++-------
 src/polyfill.ts              |  6 +++-
 src/transform.ts             | 59 ++++++++++++++--------------------
 src/utils.ts                 | 21 ++++++++-----
 tests/helpers.ts             |  2 +-
 tests/unit/cascade.test.ts   |  4 +--
 tests/unit/fallback.test.ts  |  5 +--
 tests/unit/transform.test.ts | 61 ++++++++++++++----------------------
 8 files changed, 81 insertions(+), 102 deletions(-)

diff --git a/src/parse.ts b/src/parse.ts
index df3519f..54dbe71 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -48,6 +48,7 @@ import {
 import {
   type DeclarationWithValue,
   generateCSS,
+  type GeneratedStyles,
   getAST,
   getRootStyleContainer,
   getSelectors,
@@ -810,15 +811,13 @@ export async function parseCSS(
     }
   }
 
-  // Create a new stylesheet for the position-area mapping styles
-  const positionAreaMappingStyleElement: StyleData = {
-    el: document.createElement('link'),
-    changed: false,
-    created: true,
+  // Collect the position-area mapping styles the polyfill generates. These are
+  // returned rather than added to `styleData`: they are polyfill output, not
+  // author styles to be rewritten in place.
+  const positionAreaStyles: GeneratedStyles = {
     css: '',
     containers: new Set(),
   };
-  styleData.push(positionAreaMappingStyleElement);
 
   // We loop through each selector that has been used to apply a position-area
   // declaration, and find all elements that match the selector. The same
@@ -864,19 +863,16 @@ export async function parseCSS(
         const activeStyles = needsWrapper
           ? activeWrapperStyles
           : activeTargetStyles;
-        positionAreaMappingStyleElement.css += activeStyles(
+        positionAreaStyles.css += activeStyles(
           targetData.targetUUID,
           positionData.selectorUUID,
         );
-        positionAreaMappingStyleElement.changed = true;
         // These rules match the target (or the wrapper inserted next to it), so
         // they belong in the target's own tree. That is not necessarily one of
         // the roots being polyfilled: a `position-area` in a `:host` rule
         // targets the shadow host, which lives outside the shadow root the
         // declaration came from.
-        positionAreaMappingStyleElement.containers?.add(
-          getRootStyleContainer(targetEl),
-        );
+        positionAreaStyles.containers.add(getRootStyleContainer(targetEl));
         // Populate new data for each anchor/target combo
         validPositions[targetSel] = {
           ...validPositions[targetSel],
@@ -893,5 +889,10 @@ export async function parseCSS(
     }
   }
 
-  return { rules: validPositions, inlineStyles, anchorScopes };
+  return {
+    rules: validPositions,
+    inlineStyles,
+    anchorScopes,
+    positionAreaStyles,
+  };
 }
diff --git a/src/polyfill.ts b/src/polyfill.ts
index f55ff92..9e190f3 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -31,8 +31,9 @@ import {
   isInsetProp,
   type SizingProperty,
 } from './syntax.js';
-import { transformCSS } from './transform.js';
+import { insertGeneratedStyles, transformCSS } from './transform.js';
 import {
+  type GeneratedStyles,
   reportParseErrorsOnFailure,
   resetParseErrors,
   strategyForElement,
@@ -766,6 +767,7 @@ export async function polyfill(
   // eslint-disable-next-line no-useless-assignment
   let rules: AnchorPositions = {};
   let inlineStyles: Map<HTMLElement, Record<string, string>> | undefined;
+  let positionAreaStyles: GeneratedStyles;
 
   // Reset the CSS parse errors in case the polyfill is run multiple times, and
   // at the beginning in case a previous run failed.
@@ -784,6 +786,7 @@ export async function polyfill(
     const parsedCSS = await parseCSS(styleData, options);
     rules = parsedCSS.rules;
     inlineStyles = parsedCSS.inlineStyles;
+    positionAreaStyles = parsedCSS.positionAreaStyles;
   } catch (error) {
     reportParseErrorsOnFailure();
     throw error;
@@ -792,6 +795,7 @@ export async function polyfill(
   if (Object.values(rules).length) {
     // update source code
     transformCSS(styleData, inlineStyles, options.roots);
+    insertGeneratedStyles(positionAreaStyles);
 
     // calculate position values
     await position(rules, options.useAnimationFrame);
diff --git a/src/transform.ts b/src/transform.ts
index 10d25d0..74ebf53 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,6 +1,10 @@
 import { POLYFILLED_STYLE_ATTRIBUTE } from './cascade.js';
 import type { AnchorPositioningRoot } from './polyfill.js';
-import { type StyleData, writeAdoptedStylesheet } from './utils.js';
+import {
+  type GeneratedStyles,
+  type StyleData,
+  writeAdoptedStylesheet,
+} from './utils.js';
 
 // This is a list of non-global attributes that apply to link elements but do
 // not apply to style elements. These should be removed when converting from a
@@ -29,21 +33,8 @@ export function transformCSS(
   roots?: AnchorPositioningRoot[],
 ) {
   const updatedStyleData: StyleData[] = [];
-  for (const {
-    el,
-    css,
-    changed,
-    created = false,
-    sheet,
-    containers,
-  } of styleData) {
-    const updatedObject: StyleData = {
-      el,
-      css,
-      changed: false,
-      sheet,
-      containers,
-    };
+  for (const { el, css, changed, sheet } of styleData) {
+    const updatedObject: StyleData = { el, css, changed: false, sheet };
     if (changed) {
       if (sheet) {
         // Handle constructed stylesheets adopted via `adoptedStyleSheets`.
@@ -75,26 +66,8 @@ export function transformCSS(
         if (el.hasAttribute('href')) {
           styleEl.setAttribute('data-original-href', el.getAttribute('href')!);
         }
-        if (!created) {
-          // This is an existing stylesheet, so we replace it.
-          el.insertAdjacentElement('beforebegin', styleEl);
-          el.remove();
-        } else {
-          styleEl.setAttribute(POLYFILLED_STYLE_ATTRIBUTE, 'true');
-          // This is a new stylesheet (the position-area mapping styles). A
-          // `<style>` only applies within its own tree, so it is inserted into
-          // the tree of every element its rules match, as recorded while the
-          // rules were generated. Those are not always the roots being
-          // polyfilled: a `position-area` in a `:host` rule targets the shadow
-          // host, which lives in the outer tree.
-          for (const container of containers ?? []) {
-            // If there are multiple roots, clone the element for each root
-            const node = styleEl.isConnected
-              ? styleEl
-              : styleEl.cloneNode(true);
-            container.append(node);
-          }
-        }
+        el.insertAdjacentElement('beforebegin', styleEl);
+        el.remove();
         updatedObject.el = styleEl;
       } else if (el?.hasAttribute('data-has-inline-styles')) {
         // Handle inline styles
@@ -139,3 +112,17 @@ export function transformCSS(
   }
   return updatedStyleData;
 }
+
+/**
+ * Inserts styles the polyfill generated itself (the position-area mapping
+ * styles) into each container recorded while the rules were generated.
+ */
+export function insertGeneratedStyles({ css, containers }: GeneratedStyles) {
+  if (!css) return;
+  for (const container of containers) {
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute(POLYFILLED_STYLE_ATTRIBUTE, 'true');
+    styleEl.textContent = css;
+    container.append(styleEl);
+  }
+}
diff --git a/src/utils.ts b/src/utils.ts
index f6f696c..aa4d98d 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -69,17 +69,22 @@ export interface StyleData {
   css: string;
   url?: URL;
   changed?: boolean;
-  created?: boolean; // Whether the element is created by the polyfill
   // The constructed stylesheet this data came from, when the styles were
   // adopted via `adoptedStyleSheets` rather than a `<style>`/`<link>` element.
   sheet?: CSSStyleSheet;
-  // The containers this stylesheet must be inserted into, one per tree holding
-  // an element its rules match. A `<style>` only applies within its own tree,
-  // and the elements the rules target do not always live in the roots being
-  // polyfilled — a `:host` rule styles the shadow host, which sits in the
-  // *outer* tree. Only consulted for polyfill-created stylesheets (`created`);
-  // an empty set for author styles, which are transformed in place.
-  containers?: Set<ShadowRoot | HTMLHeadElement>;
+}
+
+/**
+ * Styles the polyfill generates itself, rather than author styles it rewrites.
+ *
+ * A `<style>` only applies within its own tree, so the rules are inserted into
+ * one container per tree holding an element they match. Those are not always
+ * the roots being polyfilled: a `position-area` in a `:host` rule targets the
+ * shadow host, which sits in the *outer* tree.
+ */
+export interface GeneratedStyles {
+  css: string;
+  containers: Set<ShadowRoot | HTMLHeadElement>;
 }
 
 // Reference to the native `CSSStyleSheet.prototype.replaceSync` so that the
diff --git a/tests/helpers.ts b/tests/helpers.ts
index ca932e0..da1718c 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -21,7 +21,7 @@ export const sampleBaseCSS = '.a { color: red; } .b { color: green; }';
  * Update a CSS string used in tests by running it through `cascadeCSS`.
  */
 export function cascadeCSSForTest(css: string) {
-  const styleObj: StyleData = { el: null!, css, containers: new Set() };
+  const styleObj: StyleData = { el: null!, css };
   cascadeCSS([styleObj]);
   return styleObj.css;
 }
diff --git a/tests/unit/cascade.test.ts b/tests/unit/cascade.test.ts
index bd7d679..0ad13e2 100644
--- a/tests/unit/cascade.test.ts
+++ b/tests/unit/cascade.test.ts
@@ -77,7 +77,7 @@ describe('cascadeCSS', () => {
   it('adds insets with anchors as custom properties', async () => {
     const srcCSS = getSampleCSS('position-try-tactics');
     const styleData: StyleData[] = [
-      { css: srcCSS, el: document.createElement('div'), containers: new Set() },
+      { css: srcCSS, el: document.createElement('div') },
     ];
     const cascadeCausedChanges = await cascadeCSS(styleData);
     expect(cascadeCausedChanges).toBe(true);
@@ -88,7 +88,7 @@ describe('cascadeCSS', () => {
   it('returns false if no changes were made', async () => {
     const srcCSS = `.my-class { color: blue; }`;
     const styleData: StyleData[] = [
-      { css: srcCSS, el: document.createElement('div'), containers: new Set() },
+      { css: srcCSS, el: document.createElement('div') },
     ];
     const cascadeCausedChanges = await cascadeCSS(styleData);
     expect(cascadeCausedChanges).toBe(false);
diff --git a/tests/unit/fallback.test.ts b/tests/unit/fallback.test.ts
index 59773ae..cda4036 100644
--- a/tests/unit/fallback.test.ts
+++ b/tests/unit/fallback.test.ts
@@ -438,10 +438,7 @@ describe('fallback', () => {
         `<div id="a" style="${propWrap('bottom')}:10px"></div>` +
         `<div id="b" style="${propWrap('bottom')}:20px"></div>`;
       const styleData: StyleData[] = [
-        {
-          css: '#a, #b { position-try-fallbacks: flip-block; }',
-          containers: new Set(),
-        },
+        { css: '#a, #b { position-try-fallbacks: flip-block; }' },
       ];
 
       const { validPositions } = parsePositionFallbacks(styleData);
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 33568a4..0114c76 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -1,4 +1,4 @@
-import { transformCSS } from '../../src/transform.js';
+import { insertGeneratedStyles, transformCSS } from '../../src/transform.js';
 
 describe('transformCSS', () => {
   it('parses and removes new anchor positioning CSS after transformation to JS', () => {
@@ -21,25 +21,21 @@ describe('transformCSS', () => {
         el: link,
         css: 'html { margin: 0; }',
         changed: true,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
       {
         el: style,
         css: 'html { padding: 0; }',
         changed: true,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
       {
         el: div,
         css: '[data-has-inline-styles="key"]{color:blue;}',
         changed: true,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
       {
         el: div2,
         css: '[data-has-inline-styles="key2"]{color:blue;}',
         changed: false,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
     ];
     const inlineStyles = new Map();
@@ -73,7 +69,6 @@ describe('transformCSS', () => {
         el: link,
         css: 'html { margin: 0; }',
         changed: true,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
       },
     ];
     const inlineStyles = new Map();
@@ -90,44 +85,34 @@ describe('transformCSS', () => {
     const transformedLink = document.querySelector('link') as HTMLLinkElement;
     expect(transformedLink).toBe(null);
   });
+});
 
-  it('creates new style elements for created styles', () => {
+describe('insertGeneratedStyles', () => {
+  it('inserts a style element into each recorded container', () => {
     document.head.innerHTML = ``;
-    const styleData = [
-      {
-        el: document.createElement('link'),
-        css: 'html { margin: 0; }',
-        changed: true,
-        created: true,
-        // `parseCSS` records the style container of every element the created
-        // rules match, and only marks the sheet `changed` once it has.
-        containers: new Set([document.head]),
-      },
-    ];
-    transformCSS(styleData, undefined);
+    document.body.innerHTML = `<div id="host"></div>`;
+    const shadowRoot = document
+      .getElementById('host')!
+      .attachShadow({ mode: 'open' });
 
-    const createdStyleElement = document.querySelector(
-      'style',
-    ) as HTMLStyleElement;
-    expect(createdStyleElement.hasAttribute('data-original-href')).toBe(false);
-    expect(createdStyleElement.hasAttribute('data-generated-by-polyfill')).toBe(
-      true,
-    );
-    expect(createdStyleElement.textContent).toBe('html { margin: 0; }');
+    insertGeneratedStyles({
+      css: 'html { margin: 0; }',
+      containers: new Set([document.head, shadowRoot]),
+    });
+
+    for (const container of [document.head, shadowRoot]) {
+      const styleEl = container.querySelector('style') as HTMLStyleElement;
+      expect(styleEl.textContent).toBe('html { margin: 0; }');
+      expect(styleEl.hasAttribute('data-generated-by-polyfill')).toBe(true);
+      // Not a rewritten author `<link>`, so it carries no original href.
+      expect(styleEl.hasAttribute('data-original-href')).toBe(false);
+    }
   });
 
-  it('does not insert created styles when no containers were recorded', () => {
+  it('inserts nothing when no rules were generated', () => {
     document.head.innerHTML = ``;
-    const styleData = [
-      {
-        el: document.createElement('link'),
-        css: '',
-        changed: true,
-        created: true,
-        containers: new Set<ShadowRoot | HTMLHeadElement>(),
-      },
-    ];
-    transformCSS(styleData, undefined);
+
+    insertGeneratedStyles({ css: '', containers: new Set([document.head]) });
 
     expect(document.querySelector('style')).toBe(null);
   });

From a8b2fef2acb18ab19934dd565aef1518457847d2 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 13 Aug 2026 16:38:15 -0400
Subject: [PATCH 16/23] Only write CSS to its relevant container

---
 README.md                    | 20 ++++++++++++++++
 src/cascade.ts               |  4 ++++
 src/dom.ts                   |  5 ++--
 src/parse.ts                 | 18 +++++++-------
 src/transform.ts             |  8 +++----
 src/utils.ts                 | 27 ++++++++++++---------
 tests/e2e/shadow-dom.test.ts | 46 ++++++++++++++++++++++++++++--------
 tests/unit/transform.test.ts | 25 +++++++++++++-------
 8 files changed, 108 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index af10bf3..6a3de02 100644
--- a/README.md
+++ b/README.md
@@ -258,6 +258,26 @@ following features:
       containing block. To work around this, the polyfill strips any non-`auto`
       inset from the target (setting `inset: auto`) and re-applies it as padding
       on the wrapper, so the wrapper continues to drive positioning.
+    - Moving the target into the wrapper disconnects and reconnects it. If the
+      target is a custom element, its `connectedCallback` therefore runs more
+      than once, and any setup that can only happen once must be guarded — for
+      example, calling `attachShadow()` a second time throws. This applies to
+      any custom element the polyfill positions with `position-area`, including
+      a host positioned by a `position-area` in its own `:host` rule:
+
+      ```js
+      class MyElement extends HTMLElement {
+        connectedCallback() {
+          if (this.shadowRoot) return;
+          this.attachShadow({ mode: 'open' });
+          // ...
+        }
+      }
+      ```
+
+      Setting [`positionAreaContainingBlock`](#positionareacontainingblock) to
+      `false` (or `'auto'`, for targets that don't need the wrapper) avoids the
+      wrapper, and with it the reconnection.
   - When the wrapper is not added, styles that resolve against the containing
     block — percentage sizes, `auto` or percentage margins, percentage padding,
     or `stretch`/`anchor-center` self-alignment — will not match native
diff --git a/src/cascade.ts b/src/cascade.ts
index f1e1d04..6d26885 100644
--- a/src/cascade.ts
+++ b/src/cascade.ts
@@ -113,6 +113,10 @@ export function registerShiftedProperties(
       .join('\n  ');
     for (const root of roots) {
       const container = getRootStyleContainer(root);
+      // A detached root has no container whose styles would reach it.
+      if (!container) {
+        continue;
+      }
       // Inject the reset once per container (a shadow root, or a document head
       // shared by several light-DOM roots). Dedupe against the live DOM: scope
       // the query to our own generated styles via the marker attribute, then
diff --git a/src/dom.ts b/src/dom.ts
index c0de3d9..cc79b3e 100644
--- a/src/dom.ts
+++ b/src/dom.ts
@@ -101,8 +101,9 @@ function createFakePseudoElement(
   // `content` rule (which sizes the fake pseudo-element) and the `display: none`
   // rule (which hides the real pseudo-element) would both be ignored when
   // `element` lives in a shadow tree. The fake pseudo-element is inserted into
-  // `element` below, so it shares this same root.
-  getRootStyleContainer(element).append(sheet);
+  // `element` below, so it shares this same root. A detached element has no
+  // container — and no layout to measure — so there is nothing to append to.
+  getRootStyleContainer(element)?.append(sheet);
 
   const insertionPoint =
     pseudoElementPart === '::before' ? 'afterbegin' : 'beforeend';
diff --git a/src/parse.ts b/src/parse.ts
index 54dbe71..368b448 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -814,10 +814,7 @@ export async function parseCSS(
   // Collect the position-area mapping styles the polyfill generates. These are
   // returned rather than added to `styleData`: they are polyfill output, not
   // author styles to be rewritten in place.
-  const positionAreaStyles: GeneratedStyles = {
-    css: '',
-    containers: new Set(),
-  };
+  const positionAreaStyles: GeneratedStyles = new Map();
 
   // We loop through each selector that has been used to apply a position-area
   // declaration, and find all elements that match the selector. The same
@@ -863,16 +860,19 @@ export async function parseCSS(
         const activeStyles = needsWrapper
           ? activeWrapperStyles
           : activeTargetStyles;
-        positionAreaStyles.css += activeStyles(
-          targetData.targetUUID,
-          positionData.selectorUUID,
-        );
         // These rules match the target (or the wrapper inserted next to it), so
         // they belong in the target's own tree. That is not necessarily one of
         // the roots being polyfilled: a `position-area` in a `:host` rule
         // targets the shadow host, which lives outside the shadow root the
         // declaration came from.
-        positionAreaStyles.containers.add(getRootStyleContainer(targetEl));
+        const container = getRootStyleContainer(targetEl);
+        if (container) {
+          positionAreaStyles.set(
+            container,
+            (positionAreaStyles.get(container) ?? '') +
+              activeStyles(targetData.targetUUID, positionData.selectorUUID),
+          );
+        }
         // Populate new data for each anchor/target combo
         validPositions[targetSel] = {
           ...validPositions[targetSel],
diff --git a/src/transform.ts b/src/transform.ts
index 74ebf53..ac26c2c 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -115,11 +115,11 @@ export function transformCSS(
 
 /**
  * Inserts styles the polyfill generated itself (the position-area mapping
- * styles) into each container recorded while the rules were generated.
+ * styles) into the container recorded for each block of rules.
  */
-export function insertGeneratedStyles({ css, containers }: GeneratedStyles) {
-  if (!css) return;
-  for (const container of containers) {
+export function insertGeneratedStyles(styles: GeneratedStyles) {
+  for (const [container, css] of styles) {
+    if (!css) continue;
     const styleEl = document.createElement('style');
     styleEl.setAttribute(POLYFILLED_STYLE_ATTRIBUTE, 'true');
     styleEl.textContent = css;
diff --git a/src/utils.ts b/src/utils.ts
index aa4d98d..1c43114 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -75,17 +75,15 @@ export interface StyleData {
 }
 
 /**
- * Styles the polyfill generates itself, rather than author styles it rewrites.
+ * Styles the polyfill generates itself, rather than author styles it rewrites,
+ * keyed by the container each block of rules is inserted into.
  *
- * A `<style>` only applies within its own tree, so the rules are inserted into
- * one container per tree holding an element they match. Those are not always
- * the roots being polyfilled: a `position-area` in a `:host` rule targets the
- * shadow host, which sits in the *outer* tree.
+ * A `<style>` only applies within its own tree, so rules are grouped by the
+ * tree holding the elements they match, and each tree gets only its own rules.
+ * Those trees are not always the roots being polyfilled: a `position-area` in a
+ * `:host` rule targets the shadow host, which sits in the *outer* tree.
  */
-export interface GeneratedStyles {
-  css: string;
-  containers: Set<ShadowRoot | HTMLHeadElement>;
-}
+export type GeneratedStyles = Map<StyleContainer, string>;
 
 // Reference to the native `CSSStyleSheet.prototype.replaceSync` so that the
 // polyfill can write transformed CSS back into a constructed stylesheet without
@@ -182,17 +180,24 @@ export function writeAdoptedStylesheet(
   return sheet;
 }
 
+export type StyleContainer = ShadowRoot | HTMLHeadElement;
+
 // Resolves the node that a polyfill-generated `<style>` should be appended to
 // for a given root, so its rules apply within that root. Styles in
 // `document.head` do not pierce into a shadow root, so styles for a shadow root
 // (or an element inside one) must be appended there instead.
+//
+// Returns `null` for an element in a detached tree: no stylesheet applies to it
+// and it isn't rendered, so there is no container whose rules could reach it.
 export function getRootStyleContainer(
   root: AnchorPositioningRoot,
-): ShadowRoot | HTMLHeadElement {
+): StyleContainer | null {
   if (root instanceof ShadowRoot) return root;
   if (root instanceof Document) return root.head;
   const rootNode = root.getRootNode();
-  return rootNode instanceof ShadowRoot ? rootNode : document.head;
+  if (rootNode instanceof ShadowRoot) return rootNode;
+  if (rootNode instanceof Document) return rootNode.head;
+  return null;
 }
 
 export const POSITION_ANCHOR_PROPERTY = `--position-anchor-${INSTANCE_UUID}`;
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index ed9ff7f..25533aa 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -257,28 +257,25 @@ test('positions a custom-element host with `position-area` in a `:host` rule', a
     );
 
     const container = document.createElement('div');
-    container.id = 'position-area-host-fixture';
+    container.id = 'pa-host-fixture';
     container.setAttribute('style', 'position: relative; margin-top: 5rem');
     // Written as attribute text: the CSSOM drops `anchor-name` and
     // `position-anchor` in a browser without native support, and the polyfill
     // reads the `style` attribute.
     container.innerHTML = `
-      <div class="anchor" style="anchor-name: --position-area-host-fixture">Anchor</div>
-      <position-area-host-fixture style="position-anchor: --position-area-host-fixture">Target</position-area-host-fixture>`;
+      <div class="anchor" style="anchor-name: --pa-host-fixture">Anchor</div>
+      <position-area-host-fixture style="position-anchor: --pa-host-fixture">Target</position-area-host-fixture>`;
     document.body.append(container);
   });
 
-  const anchor = page.locator('#position-area-host-fixture .anchor');
-  const target = page.locator(
-    '#position-area-host-fixture position-area-host-fixture',
-  );
+  const anchor = page.locator('#pa-host-fixture .anchor');
+  const target = page.locator('#pa-host-fixture position-area-host-fixture');
+  const wrapper = page.locator('#pa-host-fixture POLYFILL-POSITION-AREA');
 
   // The wrapper is added by the queued polyfill run, with or without the
   // mapping styles reaching the host's tree, so waiting on it does not mask the
   // failure this test guards against.
-  await expect(
-    page.locator('#position-area-host-fixture POLYFILL-POSITION-AREA'),
-  ).toHaveCount(1);
+  await expect(wrapper).toHaveCount(1);
 
   // The generated mapping rules (keyed on the `data-pa-*` attributes the
   // polyfill sets on the target or its wrapper) belong in the host's tree.
@@ -295,6 +292,35 @@ test('positions a custom-element host with `position-area` in a `:host` rule', a
   );
   expect(mappingStylesInDocument, 'mapping styles in the host tree').toBe(true);
 
+  // The wrapper exists as soon as the CSS is parsed, but its insets are only
+  // resolved later, when the polyfill computes positions. Wait for that (this
+  // assertion retries) so the measurements below cannot race it.
+  await expect(wrapper).not.toHaveCSS('bottom', 'auto');
+
+  const anchorBox = (await anchor.boundingBox())!;
+  const targetBox = (await target.boundingBox())!;
+
+  // `position-area: top` puts the target directly above the anchor.
+  expect(targetBox.y + targetBox.height).toBeCloseTo(anchorBox.y, 0);
+  expect(targetBox.x + targetBox.width / 2).toBeCloseTo(
+    anchorBox.x + anchorBox.width / 2,
+    0,
+  );
+});
+
+test('positions the `position-area` on a `:host` rule demo', async ({
+  page,
+}) => {
+  // Covers the documented `#position-area-on-host` example itself, where the
+  // custom element is defined before the polyfill runs, rather than the
+  // dynamically-defined fixture above.
+  const anchor = page.locator('#position-area-on-host .anchor');
+  const target = page.locator('#position-area-on-host position-area-on-host');
+  const wrapper = page.locator('#position-area-on-host POLYFILL-POSITION-AREA');
+
+  await applyPolyfill(page);
+
+  await expect(wrapper).not.toHaveCSS('bottom', 'auto');
   const anchorBox = (await anchor.boundingBox())!;
   const targetBox = (await target.boundingBox())!;
 
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 0114c76..9e4405d 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -1,4 +1,5 @@
 import { insertGeneratedStyles, transformCSS } from '../../src/transform.js';
+import { type StyleContainer } from '../../src/utils.js';
 
 describe('transformCSS', () => {
   it('parses and removes new anchor positioning CSS after transformation to JS', () => {
@@ -88,21 +89,26 @@ describe('transformCSS', () => {
 });
 
 describe('insertGeneratedStyles', () => {
-  it('inserts a style element into each recorded container', () => {
+  it('gives each container only its own rules', () => {
     document.head.innerHTML = ``;
     document.body.innerHTML = `<div id="host"></div>`;
     const shadowRoot = document
       .getElementById('host')!
       .attachShadow({ mode: 'open' });
 
-    insertGeneratedStyles({
-      css: 'html { margin: 0; }',
-      containers: new Set([document.head, shadowRoot]),
-    });
+    insertGeneratedStyles(
+      new Map<StyleContainer, string>([
+        [document.head, 'html { margin: 0; }'],
+        [shadowRoot, 'html { padding: 0; }'],
+      ]),
+    );
 
-    for (const container of [document.head, shadowRoot]) {
-      const styleEl = container.querySelector('style') as HTMLStyleElement;
-      expect(styleEl.textContent).toBe('html { margin: 0; }');
+    const headStyle = document.head.querySelector('style') as HTMLStyleElement;
+    const shadowStyle = shadowRoot.querySelector('style') as HTMLStyleElement;
+    expect(headStyle.textContent).toBe('html { margin: 0; }');
+    expect(shadowStyle.textContent).toBe('html { padding: 0; }');
+
+    for (const styleEl of [headStyle, shadowStyle]) {
       expect(styleEl.hasAttribute('data-generated-by-polyfill')).toBe(true);
       // Not a rewritten author `<link>`, so it carries no original href.
       expect(styleEl.hasAttribute('data-original-href')).toBe(false);
@@ -112,7 +118,8 @@ describe('insertGeneratedStyles', () => {
   it('inserts nothing when no rules were generated', () => {
     document.head.innerHTML = ``;
 
-    insertGeneratedStyles({ css: '', containers: new Set([document.head]) });
+    insertGeneratedStyles(new Map());
+    insertGeneratedStyles(new Map([[document.head, '']]));
 
     expect(document.querySelector('style')).toBe(null);
   });

From 0ac7c969b2beb1490a8b6bb5e11a2aab4b303b39 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 13 Aug 2026 16:50:48 -0400
Subject: [PATCH 17/23] add tests

---
 src/utils.ts                 |   6 +-
 tests/e2e/shadow-dom.test.ts | 111 ++++++++++++++++++++++++++++++++++-
 tests/unit/utils.test.ts     |  54 ++++++++++++++++-
 3 files changed, 166 insertions(+), 5 deletions(-)

diff --git a/src/utils.ts b/src/utils.ts
index 1c43114..a15777b 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -74,6 +74,10 @@ export interface StyleData {
   sheet?: CSSStyleSheet;
 }
 
+// The node a polyfill-generated `<style>` is appended to, so its rules apply
+// within one tree. See `getRootStyleContainer`.
+export type StyleContainer = ShadowRoot | HTMLHeadElement;
+
 /**
  * Styles the polyfill generates itself, rather than author styles it rewrites,
  * keyed by the container each block of rules is inserted into.
@@ -180,8 +184,6 @@ export function writeAdoptedStylesheet(
   return sheet;
 }
 
-export type StyleContainer = ShadowRoot | HTMLHeadElement;
-
 // Resolves the node that a polyfill-generated `<style>` should be appended to
 // for a given root, so its rules apply within that root. Styles in
 // `document.head` do not pierce into a shadow root, so styles for a shadow root
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index 25533aa..742d5f1 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -270,7 +270,11 @@ test('positions a custom-element host with `position-area` in a `:host` rule', a
 
   const anchor = page.locator('#pa-host-fixture .anchor');
   const target = page.locator('#pa-host-fixture position-area-host-fixture');
-  const wrapper = page.locator('#pa-host-fixture POLYFILL-POSITION-AREA');
+  // Playwright's CSS engine pierces open shadow roots, so a descendant
+  // combinator here would also match wrappers inside the host's shadow tree.
+  // The wrapper the polyfill inserts replaces the host in its own parent, so
+  // scope this to direct children.
+  const wrapper = page.locator('#pa-host-fixture > POLYFILL-POSITION-AREA');
 
   // The wrapper is added by the queued polyfill run, with or without the
   // mapping styles reaching the host's tree, so waiting on it does not mask the
@@ -316,7 +320,10 @@ test('positions the `position-area` on a `:host` rule demo', async ({
   // dynamically-defined fixture above.
   const anchor = page.locator('#position-area-on-host .anchor');
   const target = page.locator('#position-area-on-host position-area-on-host');
-  const wrapper = page.locator('#position-area-on-host POLYFILL-POSITION-AREA');
+  // Scoped to a direct child: Playwright locators pierce open shadow roots.
+  const wrapper = page.locator(
+    '#position-area-on-host .demo-elements > POLYFILL-POSITION-AREA',
+  );
 
   await applyPolyfill(page);
 
@@ -332,6 +339,106 @@ test('positions the `position-area` on a `:host` rule demo', async ({
   );
 });
 
+test('gives each tree only its own `position-area` mapping rules', async ({
+  page,
+}) => {
+  // One polyfill run, two style containers: the `:host` rule targets the host
+  // (which lives in the outer tree, so its rules belong in `document.head`),
+  // while `.inner` targets an element inside the shadow root. Each container
+  // must receive its own rules, and only its own.
+  await applyPolyfill(page);
+
+  await page.evaluate(() => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      :host { position: absolute; position-area: top; padding: 0.5em; }
+      .inner-anchor { anchor-name: --inner; }
+      .inner {
+        position: absolute;
+        position-anchor: --inner;
+        position-area: bottom;
+      }
+    `);
+
+    customElements.define(
+      'two-container-fixture',
+      class extends HTMLElement {
+        connectedCallback() {
+          // Moving the host into the `position-area` wrapper reconnects it.
+          if (this.shadowRoot) return;
+
+          this.attachShadow({ mode: 'open' });
+          this.shadowRoot!.adoptedStyleSheets = [sheet];
+          this.shadowRoot!.innerHTML = `
+            <div style="position: relative; height: 80px">
+              <div class="inner-anchor" style="margin-top: 20px">Inner anchor</div>
+              <div class="inner">Inner target</div>
+            </div>`;
+        }
+      },
+    );
+
+    const container = document.createElement('div');
+    container.id = 'two-container';
+    container.setAttribute('style', 'position: relative; margin-top: 12rem');
+    container.innerHTML = `
+      <div class="anchor" style="anchor-name: --two-container">Anchor</div>
+      <two-container-fixture style="position-anchor: --two-container">Target</two-container-fixture>`;
+    document.body.append(container);
+  });
+
+  const host = page.locator('#two-container two-container-fixture');
+  const outerAnchor = page.locator('#two-container .anchor');
+  const innerAnchor = host.locator('.inner-anchor');
+  const innerTarget = host.locator('.inner');
+
+  // Both wrappers must resolve their insets. Scoped to direct children, since
+  // Playwright locators pierce open shadow roots and would otherwise match the
+  // outer and inner wrappers together.
+  await expect(
+    page.locator('#two-container > POLYFILL-POSITION-AREA'),
+  ).not.toHaveCSS('bottom', 'auto');
+  await expect(innerTarget.locator('xpath=..')).not.toHaveCSS('top', 'auto');
+
+  const outerAnchorBox = (await outerAnchor.boundingBox())!;
+  const hostBox = (await host.boundingBox())!;
+  const innerAnchorBox = (await innerAnchor.boundingBox())!;
+  const innerTargetBox = (await innerTarget.boundingBox())!;
+
+  // The host is positioned by rules in `document.head`...
+  expect(hostBox.y + hostBox.height, 'host above its outer anchor').toBeCloseTo(
+    outerAnchorBox.y,
+    0,
+  );
+  // ...and the inner target by rules in the shadow root.
+  expect(innerTargetBox.y, 'inner target below its inner anchor').toBeCloseTo(
+    innerAnchorBox.y + innerAnchorBox.height,
+    0,
+  );
+
+  // Neither container carries the other's rules. Counting rule blocks keyed on
+  // a `data-pa-*-for-` attribute catches a regression to inserting the whole
+  // generated stylesheet into every container.
+  const ruleCounts = await page.evaluate(() => {
+    const keyed = /data-pa-(wrapper|target)-for-/;
+    const count = (root: Document | ShadowRoot) =>
+      [...root.querySelectorAll('style[data-generated-by-polyfill]')]
+        .flatMap((el) => (el.textContent ?? '').split('}'))
+        .filter((rule) => keyed.test(rule)).length;
+    const shadowRoot = document.querySelector(
+      'two-container-fixture',
+    )!.shadowRoot!;
+    return { shadow: count(shadowRoot), head: count(document) };
+  });
+
+  // `.inner` needs a wrapper, which emits two rules (the wrapper's insets and
+  // its `> *` alignment). The host's rules are not among them.
+  expect(ruleCounts.shadow, 'rules in the shadow root').toBe(2);
+  // The head holds the host's two rules plus the two for the demo section's
+  // own `position-area` host.
+  expect(ruleCounts.head, 'rules in the document head').toBe(4);
+});
+
 test('anchors to a pseudo-element inside a shadow root', async ({ page }) => {
   // `#shadow-pseudo-anchor::before` (a block, 100px tall) is the anchor; the
   // target uses `top: anchor(bottom)`. To measure a pseudo-element the polyfill
diff --git a/tests/unit/utils.test.ts b/tests/unit/utils.test.ts
index 069419e..b17a615 100644
--- a/tests/unit/utils.test.ts
+++ b/tests/unit/utils.test.ts
@@ -1,6 +1,11 @@
 import type * as csstree from 'css-tree';
 
-import { cssParseErrors, getAST, splitCommaList } from '../../src/utils.js';
+import {
+  cssParseErrors,
+  getAST,
+  getRootStyleContainer,
+  splitCommaList,
+} from '../../src/utils.js';
 
 describe('splitCommaList', () => {
   it('works', () => {
@@ -41,3 +46,50 @@ describe('getAST', () => {
     expect(cssParseErrors.size).toBe(1);
   });
 });
+
+describe('getRootStyleContainer', () => {
+  it('resolves a document to its head', () => {
+    expect(getRootStyleContainer(document)).toBe(document.head);
+  });
+
+  it('resolves a shadow root to itself', () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+
+    expect(getRootStyleContainer(shadowRoot)).toBe(shadowRoot);
+  });
+
+  it('resolves an element in the document to the document head', () => {
+    const el = document.createElement('div');
+    document.body.append(el);
+
+    expect(getRootStyleContainer(el)).toBe(document.head);
+  });
+
+  it('resolves an element inside a shadow root to that shadow root', () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+    const shadowRoot = host.attachShadow({ mode: 'open' });
+    const el = document.createElement('div');
+    shadowRoot.append(el);
+
+    expect(getRootStyleContainer(el)).toBe(shadowRoot);
+  });
+
+  it('resolves a shadow host to the tree the host lives in, not its own shadow root', () => {
+    // The case this exists for: a `:host` rule styles the host, which sits in
+    // the *outer* tree, so its generated styles must go there.
+    const host = document.createElement('div');
+    document.body.append(host);
+    host.attachShadow({ mode: 'open' });
+
+    expect(getRootStyleContainer(host)).toBe(document.head);
+  });
+
+  it('returns null for a detached element', () => {
+    // No stylesheet reaches a detached tree, so there is no container whose
+    // rules could apply; `document.head` would silently never match.
+    expect(getRootStyleContainer(document.createElement('div'))).toBe(null);
+  });
+});

From c3a864d518d96d0319a75674d407aed169e343fa Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Fri, 14 Aug 2026 10:09:17 -0400
Subject: [PATCH 18/23] Add tests, remove term reducer

---
 src/fetch.ts             | 12 +++---
 tests/unit/fetch.test.ts | 79 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/src/fetch.ts b/src/fetch.ts
index 7e7d7a3..107c260 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -95,16 +95,14 @@ let inlineAnchorStylesRegex: RegExp | undefined;
  * @param el The element to check.
  * @returns True if the element has inline styles used by the polyfill.
  */
-function hasInlineAnchorStyles(el: HTMLElement) {
+export function hasInlineAnchorStyles(el: HTMLElement) {
   if (!inlineAnchorStylesRegex) {
     const terms = ['anchor', ...Object.keys(SHIFTED_PROPERTIES)];
+    // Match at a declaration boundary, so a term appearing in a *value* does
+    // not count: `float: left` and `line-height: 1.5` are not styles we read.
     inlineAnchorStylesRegex = new RegExp(
-      terms
-        .filter(
-          (term) =>
-            !terms.some((other) => other !== term && term.includes(other)),
-        )
-        .join('|'),
+      `(?:^|;)\\s*(?:${terms.join('|')})`,
+      'i',
     );
   }
   return inlineAnchorStylesRegex.test(el.getAttribute('style') ?? '');
diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
index f9be326..7ec6010 100644
--- a/tests/unit/fetch.test.ts
+++ b/tests/unit/fetch.test.ts
@@ -1,6 +1,6 @@
 import fetchMock from 'fetch-mock';
 
-import { fetchCSS } from '../../src/fetch.js';
+import { fetchCSS, hasInlineAnchorStyles } from '../../src/fetch.js';
 import { getSampleCSS, requestWithCSSType } from '../helpers.js';
 
 describe('fetch stylesheet', () => {
@@ -246,3 +246,80 @@ describe('fetch styles manually', () => {
     expect(styleData[3].css).toContain('top: anchor(--anchor bottom);');
   });
 });
+
+describe('hasInlineAnchorStyles', () => {
+  function elWithStyle(style: string) {
+    const el = document.createElement('div');
+    el.setAttribute('style', style);
+    return el;
+  }
+
+  it('returns false when the element has no style attribute', () => {
+    const el = document.createElement('div');
+    expect(hasInlineAnchorStyles(el)).toBe(false);
+  });
+
+  it('returns false for an empty style attribute', () => {
+    expect(hasInlineAnchorStyles(elWithStyle(''))).toBe(false);
+  });
+
+  it.each([
+    ['color', 'color: red;'],
+    ['background', 'background: blue;'],
+    ['font-weight', 'font-weight: bold;'],
+    ['display', 'display: flex;'],
+    ['z-index', 'z-index: 1;'],
+    ['clear', 'clear: both;'],
+    ['vertical-align', 'vertical-align: middle;'],
+    ['letter-spacing', 'letter-spacing: 1px;'],
+    ['box-sizing', 'box-sizing: border-box;'],
+  ])(
+    'returns false for %s, which is unrelated to the polyfill',
+    (_name, style) => {
+      expect(hasInlineAnchorStyles(elWithStyle(style))).toBe(false);
+    },
+  );
+
+  // Don't match terms that appear in other property names or values.
+  it.each([
+    ['border-top (contains "top")', 'border-top: 1px solid red;'],
+    ['border-left-width (contains "left")', 'border-left-width: 2px;'],
+    ['line-height (contains "height")', 'line-height: 1.5;'],
+    ['float: left (contains "left")', 'float: left;'],
+    ['text-align: right (contains "right")', 'text-align: right;'],
+    ['outline-width (contains "width")', 'outline-width: 1px;'],
+    [
+      'background-position: top (contains "top")',
+      'background-position: top right;',
+    ],
+    ['column-width (contains "width")', 'column-width: 100px;'],
+    ['transform-origin: top left', 'transform-origin: top left;'],
+    ['term as custom property', '--anchor: anchor(--my-anchor);'],
+  ])('returns true (known false positive) for %s', (_name, style) => {
+    expect(hasInlineAnchorStyles(elWithStyle(style))).toBe(false);
+  });
+
+  it.each([
+    ['anchor()', 'top: anchor(--my-anchor end);'],
+    ['anchor-name', 'anchor-name: --my-anchor;'],
+    ['anchor-scope', 'anchor-scope: --my-anchor;'],
+    ['position-anchor', 'position-anchor: --my-anchor;'],
+    ['position-area', 'position-area: top;'],
+    ['an inset longhand', 'inset-block-start: 1px;'],
+    ['a plain inset property', 'top: 1px;'],
+    ['a margin longhand', 'margin-inline-start: 1px;'],
+    ['a plain margin property', 'margin-left: 1px;'],
+    ['a sizing property', 'width: 100px;'],
+    ['a min-sizing longhand', 'min-inline-size: 100px;'],
+    ['a padding longhand', 'padding-inline-start: 1px;'],
+    ['a plain padding property', 'padding: 1px;'],
+    ['a self-alignment property', 'justify-self: center;'],
+  ])('returns true when the style includes %s', (_name, style) => {
+    expect(hasInlineAnchorStyles(elWithStyle(style))).toBe(true);
+  });
+
+  it('matches regardless of where the relevant declaration falls', () => {
+    const el = elWithStyle('color: red; anchor-name: --my-anchor; z-index: 1;');
+    expect(hasInlineAnchorStyles(el)).toBe(true);
+  });
+});

From dc5f29a52f58c6203a14b8d95e5b71202ffb2ee6 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Fri, 14 Aug 2026 10:12:52 -0400
Subject: [PATCH 19/23] Comment

---
 src/fetch.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/fetch.ts b/src/fetch.ts
index 107c260..4e32fbb 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -97,6 +97,9 @@ let inlineAnchorStylesRegex: RegExp | undefined;
  */
 export function hasInlineAnchorStyles(el: HTMLElement) {
   if (!inlineAnchorStylesRegex) {
+    // While there is overlap in the terms (`margin` and `margin-block-start`),
+    // reducing the list to only the shortest distinct terms doesn't
+    // significantly improve performance.
     const terms = ['anchor', ...Object.keys(SHIFTED_PROPERTIES)];
     // Match at a declaration boundary, so a term appearing in a *value* does
     // not count: `float: left` and `line-height: 1.5` are not styles we read.

From 5c5272f81c9fabe2a00d4fe845f94f28ab500ede Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Fri, 14 Aug 2026 10:20:00 -0400
Subject: [PATCH 20/23] Update comment

---
 src/fetch.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/fetch.ts b/src/fetch.ts
index 4e32fbb..1c9d284 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -110,10 +110,10 @@ export function hasInlineAnchorStyles(el: HTMLElement) {
   }
   return inlineAnchorStylesRegex.test(el.getAttribute('style') ?? '');
 }
-// Searches for all elements with inline style attributes that include `anchor`.
-// For each element found, adds a new 'data-has-inline-styles' attribute with a
-// random UUID value, and then formats the styles in the same manner as CSS from
-// style tags.
+// Searches for all elements with inline style attributes that contain
+// declarations used by the polyfill. For each element found, adds a new
+// 'data-has-inline-styles' attribute with a random UUID value, and then formats
+// the styles in the same manner as CSS from style tags.
 function fetchInlineStyles(elements?: HTMLElement[]) {
   const elementsWithInlineAnchorStyles: HTMLElement[] = (
     elements ?? Array.from(document.querySelectorAll<HTMLElement>('[style]'))

From 3e0b420ce0d5b53ca365e417dd1eb4e6bc08a750 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 14 Aug 2026 10:41:11 -0400
Subject: [PATCH 21/23] Update src/fetch.ts

---
 src/fetch.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/fetch.ts b/src/fetch.ts
index 1c9d284..93ce851 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -79,10 +79,6 @@ async function fetchLinkedStylesheets(
 // faster, and scales with the number of styled elements rather than with the
 // size of the document.
 //
-// A term that contains another term is redundant -- `margin` already matches
-// `margin-inline-start`, `anchor` already matches `anchor-name` -- so only the
-// shortest distinct ones are kept.
-//
 // Built on first use rather than at module evaluation: `cascade.js` and this
 // module are part of an import cycle, so `SHIFTED_PROPERTIES` is not
 // necessarily initialized yet when this module is evaluated.

From e922b9477b5da141e47c351e192ce1de5463aaa3 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 14 Aug 2026 10:41:19 -0400
Subject: [PATCH 22/23] Update tests/unit/fetch.test.ts

---
 tests/unit/fetch.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
index 7ec6010..113c65a 100644
--- a/tests/unit/fetch.test.ts
+++ b/tests/unit/fetch.test.ts
@@ -295,7 +295,7 @@ describe('hasInlineAnchorStyles', () => {
     ['column-width (contains "width")', 'column-width: 100px;'],
     ['transform-origin: top left', 'transform-origin: top left;'],
     ['term as custom property', '--anchor: anchor(--my-anchor);'],
-  ])('returns true (known false positive) for %s', (_name, style) => {
+  ])('returns false for %s', (_name, style) => {
     expect(hasInlineAnchorStyles(elWithStyle(style))).toBe(false);
   });
 

From d502c297c24a435f2b7990257efd7b68d1d3cbcd Mon Sep 17 00:00:00 2001
From: Jeroen Zwartepoorte <jeroen.zwartepoorte@iddinkgroup.com>
Date: Sun, 16 Aug 2026 11:21:40 +0200
Subject: [PATCH 23/23] Add example with scoped custom element registry

---
 shadow-dom.html              | 203 +++++++++++++++++++++++++++++++++++
 tests/e2e/shadow-dom.test.ts |  84 +++++++++++++++
 2 files changed, 287 insertions(+)

diff --git a/shadow-dom.html b/shadow-dom.html
index 8ad0cb0..933e046 100644
--- a/shadow-dom.html
+++ b/shadow-dom.html
@@ -27,6 +27,12 @@
       anchor-adopted-styles {
         width: 100%;
       }
+
+      registry-anchor,
+      scoped-registry-host {
+        display: block;
+        flex: 1;
+      }
     </style>
     <script type="module">
       function defineCustomElements() {
@@ -130,8 +136,108 @@
           }
         }
         customElements.define('position-area-on-host', PositionAreaOnHost);
+
+        // One tag name, two definitions: `<registry-anchor>` is defined on
+        // `window.customElements` for the outer tree, and again in a registry
+        // scoped to `<scoped-registry-host>`'s shadow root. Which definition an
+        // element upgrades to depends on the tree it sits in.
+        //
+        // Both style themselves with a constructed stylesheet, so both are
+        // positioned by the `adoptedStyleSheets` patch -- which hangs off the
+        // shadow root rather than off any registry, and so does not care which
+        // one defined the host.
+        const registrySheet = (anchorName, side) => {
+          const sheet = new CSSStyleSheet();
+          sheet.replaceSync(`
+            .anchor {
+              anchor-name: ${anchorName};
+              margin-block-end: calc(1lh + 1rem);
+              width: fit-content;
+            }
+            .target {
+              position: absolute;
+              position-anchor: ${anchorName};
+              top: anchor(bottom);
+              ${side}: anchor(${side});
+            }
+          `);
+          return sheet;
+        };
+        const globalRegistrySheet = registrySheet(
+          '--global-registry-anchor',
+          'left',
+        );
+        const scopedRegistrySheet = registrySheet(
+          '--scoped-registry-anchor',
+          'right',
+        );
+
+        const registryAnchorMarkup = (label) => `
+          <link rel="stylesheet" href="/demo.css" />
+          <div class="anchor">${label} Anchor</div>
+          <div class="target">${label} Target</div>
+        `;
+
+        class GlobalRegistryAnchor extends HTMLElement {
+          connectedCallback() {
+            if (this.shadowRoot) return;
+            this.attachShadow({ mode: 'open' });
+            this.shadowRoot.adoptedStyleSheets = [globalRegistrySheet];
+            this.shadowRoot.innerHTML = registryAnchorMarkup('Global');
+          }
+        }
+        customElements.define('registry-anchor', GlobalRegistryAnchor);
+
+        // Never registered on `window.customElements`: it only exists inside
+        // the scoped registry below.
+        class ScopedRegistryAnchor extends HTMLElement {
+          connectedCallback() {
+            if (this.shadowRoot) return;
+            this.attachShadow({ mode: 'open' });
+            this.shadowRoot.adoptedStyleSheets = [scopedRegistrySheet];
+            this.shadowRoot.innerHTML = registryAnchorMarkup('Scoped');
+          }
+        }
+
+        class ScopedRegistryHost extends HTMLElement {
+          connectedCallback() {
+            if (this.shadowRoot) return;
+            if (!SUPPORTS_SCOPED_REGISTRIES) {
+              this.attachShadow({ mode: 'open' });
+              this.shadowRoot.innerHTML = `
+                <link rel="stylesheet" href="/demo.css" />
+                <p>This browser does not support scoped registries.</p>
+              `;
+              return;
+            }
+            const registry = new CustomElementRegistry();
+            registry.define('registry-anchor', ScopedRegistryAnchor);
+            this.attachShadow({
+              mode: 'open',
+              customElementRegistry: registry,
+            });
+            // Resolves to the scoped definition, not the global one.
+            this.shadowRoot.innerHTML = '<registry-anchor></registry-anchor>';
+          }
+        }
+        customElements.define('scoped-registry-host', ScopedRegistryHost);
       }
 
+      const SUPPORTS_SCOPED_REGISTRIES = (() => {
+        try {
+          const registry = new CustomElementRegistry();
+          const probe = document.createElement('div');
+          return (
+            probe.attachShadow({
+              mode: 'open',
+              customElementRegistry: registry,
+            }).customElementRegistry === registry
+          );
+        } catch {
+          return false;
+        }
+      })();
+
       const btn = document.getElementById('apply-polyfill');
 
       const SUPPORTS_ANCHOR_POSITIONING =
@@ -575,6 +681,103 @@ <h2>
 }
 customElements.define("position-area-on-host", PositionAreaOnHost);
 &lt;/script&gt;
+</code></pre>
+    </section>
+    <section id="scoped-registry" class="demo-item">
+      <h2>
+        <a href="#scoped-registry" aria-hidden="true">🔗</a>
+        Works with a scoped custom element registry
+      </h2>
+      <div style="display: flex; gap: 2rem" class="demo-elements">
+        <registry-anchor></registry-anchor>
+        <scoped-registry-host></scoped-registry-host>
+      </div>
+      <div class="note">
+        <p>
+          With polyfill applied: both Targets are positioned below their own
+          Anchor — the Global one aligned to its left edge, the Scoped one to
+          its right.
+        </p>
+        <p>
+          Both elements are
+          <code>&lt;registry-anchor&gt;</code>, but they are two different
+          definitions. The left one comes from
+          <code>window.customElements</code>. The right one comes from a
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#scoped_custom_element_registries"
+            >scoped registry</a
+          >
+          that only applies inside
+          <code>&lt;scoped-registry-host&gt;</code>'s shadow root, and is never
+          registered globally.
+        </p>
+        <p>
+          The polyfill treats them the same, because the constructed-stylesheet
+          patch hangs off <code>adoptedStyleSheets</code> and the shadow root
+          rather than off a registry. A polyfill that keyed on
+          <code>window.customElements</code> would silently miss the scoped one.
+        </p>
+        <p>
+          <strong>Note: </strong>scoped registries need Chrome 146+ or Safari
+          26+. Those versions also support anchor positioning natively, so this
+          demo only exercises the polyfill in a browser that gains scoped
+          registries before anchor positioning. Where they are unavailable, the
+          right-hand component says so.
+        </p>
+      </div>
+      <pre><code class="language-html"
+>&lt;registry-anchor&gt;&lt;/registry-anchor&gt;
+&lt;scoped-registry-host&gt;&lt;/scoped-registry-host&gt;
+&lt;script&gt;
+&lt;!-- Load the shadow entrypoint before defining custom elements,
+so the replaceSync and adoptedStyleSheets patches are installed
+before any connectedCallback runs. --&gt;
+import { patchAndPolyfillConstructedStylesheets } from '@oddbird/css-anchor-positioning/fn';
+patchAndPolyfillConstructedStylesheets();
+
+class GlobalRegistryAnchor extends HTMLElement {
+  connectedCallback() {
+    if (this.shadowRoot) return;
+    this.attachShadow({ mode: "open" });
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      .anchor { anchor-name: --global-registry-anchor; }
+      .target {
+        position: absolute;
+        position-anchor: --global-registry-anchor;
+        top: anchor(bottom);
+        left: anchor(left);
+      }
+    `);
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    this.shadowRoot.innerHTML =
+      "&lt;div class='anchor'&gt;Anchor&lt;/div&gt;&lt;div class='target'&gt;Target&lt;/div&gt;";
+  }
+}
+customElements.define("registry-anchor", GlobalRegistryAnchor);
+
+&lt;!-- Same tag name, a different definition, never registered globally. --&gt;
+class ScopedRegistryAnchor extends HTMLElement {
+  connectedCallback() {
+    &lt;!-- ...adopts its own constructed stylesheet... --&gt;
+  }
+}
+
+class ScopedRegistryHost extends HTMLElement {
+  connectedCallback() {
+    if (this.shadowRoot) return;
+
+    const registry = new CustomElementRegistry();
+    registry.define("registry-anchor", ScopedRegistryAnchor);
+    this.attachShadow({ mode: "open", customElementRegistry: registry });
+
+    &lt;!-- Resolves to the scoped definition, not the global one. --&gt;
+    this.shadowRoot.innerHTML = "&lt;registry-anchor&gt;&lt;/registry-anchor&gt;";
+  }
+}
+customElements.define("scoped-registry-host", ScopedRegistryHost);
+&lt;/script&gt;
 </code></pre>
     </section>
     <section id="sponsor">
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index 742d5f1..2594d87 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -522,3 +522,87 @@ test('emulates non-inheritance of shifted properties inside a shadow root withou
   expect(result.containerHeight).toBe('400px');
   expect(result.targetHeight).toBe('');
 });
+
+// Whether the browser honours `attachShadow({ customElements })`. Detected the
+// same way the demo does: by checking the option was honoured, rather than only
+// that `CustomElementRegistry` is constructible. An unrecognized `attachShadow`
+// option is ignored silently, so testing for the constructor alone would report
+// support the browser does not have.
+function supportsScopedRegistries(page: Page) {
+  return page.evaluate(() => {
+    try {
+      const registry = new CustomElementRegistry();
+      const probe = document.createElement('div');
+      return (
+        probe.attachShadow({ mode: 'open', customElementRegistry: registry })
+          .customElementRegistry === registry
+      );
+    } catch {
+      return false;
+    }
+  });
+}
+
+/** The anchor and target boxes inside a `<registry-anchor>`'s shadow root. */
+function registryAnchorBoxes(page: Page, hostSelector: string) {
+  return page.evaluate((selector) => {
+    const host = document.querySelector(selector)!;
+    const root = (
+      host.tagName.toLowerCase() === 'registry-anchor'
+        ? host
+        : host.shadowRoot!.querySelector('registry-anchor')!
+    ) as HTMLElement;
+    const shadow = root.shadowRoot!;
+    const rect = (el: Element) => {
+      const { top, bottom, left, right } = el.getBoundingClientRect();
+      return { top, bottom, left, right };
+    };
+    return {
+      anchor: rect(shadow.querySelector('.anchor')!),
+      target: rect(shadow.querySelector('.target')!),
+    };
+  }, hostSelector);
+}
+
+test('positions a custom element defined on `window.customElements`', async ({
+  page,
+}) => {
+  // The control for the scoped-registry case below: same component shape, same
+  // constructed stylesheet, defined the ordinary way.
+  await applyPolyfill(page);
+
+  const { anchor, target } = await registryAnchorBoxes(page, 'registry-anchor');
+
+  expect(target.top).toBeCloseTo(anchor.bottom, 0);
+  expect(target.left).toBeCloseTo(anchor.left, 0);
+});
+
+test('positions a custom element defined in a scoped registry', async ({
+  page,
+}) => {
+  test.skip(
+    !(await supportsScopedRegistries(page)),
+    'Browser does not honour `attachShadow({ customElements })`.',
+  );
+
+  await applyPolyfill(page);
+
+  // Upgraded from the scoped definition, which was never registered globally --
+  // the tag name resolves to the outer definition everywhere else on the page.
+  const scopedIsGlobal = await page.evaluate(() => {
+    const scoped = document
+      .querySelector('scoped-registry-host')!
+      .shadowRoot!.querySelector('registry-anchor')!;
+    return scoped.constructor === customElements.get('registry-anchor');
+  });
+  expect(scopedIsGlobal).toBe(false);
+
+  // The constructed-stylesheet patch reaches it all the same: it hangs off the
+  // shadow root, not off a registry.
+  const { anchor, target } = await registryAnchorBoxes(
+    page,
+    'scoped-registry-host',
+  );
+  expect(target.top).toBeCloseTo(anchor.bottom, 0);
+  expect(target.right).toBeCloseTo(anchor.right, 0);
+});