diff --git a/README.md b/README.md
index c15dfc7..5b3c638 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,79 @@ afterwards; an explicit argument takes precedence over the global.
 You can view a more complete demo
 [here](https://anchor-positioning.oddbird.net/shadow-dom.html).
 
+### Setting anchor properties from JavaScript
+
+Assigning an anchor positioning property through the CSSOM does nothing in a
+browser without native anchor positioning. The CSSOM drops properties it doesn't
+know, so no CSS declaration is produced and nothing is written to the `style`
+attribute the polyfill reads — while reading the value back still returns it,
+which makes the assignment look like it worked:
+
+```js
+el.style.anchorName = '--foo';
+el.style.anchorName; // '--foo'
+el.getAttribute('style'); // null
+```
+
+If your components wire up their anchor positioning at runtime, call
+`patchCSSOM()` to make those properties settable. Like the constructed
+stylesheet patch, call it before any `connectedCallback` runs:
+
+```js
+import {
+  patchAndPolyfillConstructedStylesheets,
+  patchCSSOM,
+} from '@oddbird/css-anchor-positioning/fn';
+
+patchCSSOM();
+patchAndPolyfillConstructedStylesheets();
+
+// Define your custom elements after the patches are installed.
+```
+
+If your components don't adopt constructed stylesheets, apply the polyfill
+yourself once the elements are defined, passing their shadow roots as
+[`roots`](#roots).
+
+It covers every anchor positioning property the polyfill supports, defining each
+on `CSSStyleDeclaration` and storing what you set in the custom property the
+polyfill shifts that declaration into internally:
+
+| Property                 | CSSOM name             |
+| ------------------------ | ---------------------- |
+| `anchor-name`            | `anchorName`           |
+| `anchor-scope`           | `anchorScope`          |
+| `position-anchor`        | `positionAnchor`       |
+| `position-area`          | `positionArea`         |
+| `position-try`           | `positionTry`          |
+| `position-try-fallbacks` | `positionTryFallbacks` |
+| `position-try-order`     | `positionTryOrder`     |
+
+`setProperty()`, `getPropertyValue()` and `removeProperty()` accept the dashed
+names as well. `position-visibility` is left out, as the polyfill does not
+support it.
+
+Four things to know:
+
+- Once it has run, `'anchorName' in element.style` returns `true`. Feature
+  detection happens before the polyfill is loaded, so that check is unaffected,
+  but anything detecting support later on can use
+  `CSS.supports('anchor-name: --a')`, which the patch leaves alone.
+- The `style` attribute holds the polyfill's custom property rather than the
+  property you assigned, so devtools shows `--anchor-name-<id>: --foo` instead
+  of `anchor-name: --foo`. Reading the value back through the CSSOM returns what
+  you set.
+- It covers properties, not values. An `anchor()` value assigned to
+  `el.style.top` is dropped just the same, for being a value the browser does
+  not understand.
+- Any CSSOM write re-serializes the whole declaration block from what the
+  browser parsed, so it also drops `anchor()` values already in the `style`
+  attribute. Keep those in a stylesheet if the element's inline styles are
+  written to from JavaScript.
+
+Values set before `patchCSSOM()` runs are not picked up, since the assignments
+that were dropped left nothing behind.
+
 ## Configuration
 
 The polyfill supports a small number of options. When using the default version
@@ -310,6 +383,8 @@ Browsers provide some validation for imperatively setting inline styles.
 styles of `el`. This is problematic for this polyfill, as we would like to
 support `el.style.anchorName = "--foo"`, but that won't work in browsers that
 don't support the `anchor-name` property.
+[`patchCSSOM()`](#setting-anchor-properties-from-javascript) makes the anchor
+positioning properties settable that way.
 
 While `el.setAttribute('style', 'anchor-name: --foo')` or `<div
 style="anchor-name: --foo" />` both work, developers are often using tools that
diff --git a/index.html b/index.html
index c0f0de2..8633578 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,7 @@
     <link rel="stylesheet" href="/anchor-media-query.css" />
     <link rel="stylesheet" href="/anchor-scope.css" />
     <link rel="stylesheet" href="/position-area.css" />
+    <link rel="stylesheet" href="/cssom.css" />
     <link rel="stylesheet" href="/anchor-inside-outside.css" />
     <link rel="stylesheet" href="/import-has-import.css" />
     <link rel="stylesheet" href="/invalid-anchor.css" />
@@ -69,7 +70,7 @@
       }
     </style>
     <script type="module">
-      import polyfill from '/src/index-fn.ts';
+      import polyfill, { patchCSSOM } from '/src/index-fn.ts';
 
       const SUPPORTS_ANCHOR_POSITIONING =
         'anchorName' in document.documentElement.style;
@@ -91,6 +92,20 @@
           'anchor-positioning is supported in this browser; polyfill skipped.',
         );
       }
+      // Wire up the `#cssom` demo from JavaScript, the way a design system
+      // component would. `patchCSSOM()` goes after the feature check above:
+      // defining these properties makes `'anchorName' in element.style` true.
+      patchCSSOM();
+      document.getElementById('my-cssom-anchor').style.anchorName =
+        '--my-cssom-anchor';
+      const cssomTarget = document.getElementById('my-cssom-target');
+      cssomTarget.style.positionAnchor = '--my-cssom-anchor';
+      const cssomPositionAreaTarget = document.getElementById(
+        'my-cssom-position-area-target',
+      );
+      cssomPositionAreaTarget.style.positionAnchor = '--my-cssom-anchor';
+      cssomPositionAreaTarget.style.positionArea = 'top';
+
       // Vite errors while trying to parse the end script tag, but interpolating
       // it avoids the error.
       const polyfillCDN = `
@@ -1617,6 +1632,69 @@ <h2>
 #imports .anchor {
   color: var(--brand-orange);
 }</code></pre>
+    </section>
+    <section id="cssom" class="demo-item">
+      <h2>
+        <a href="#cssom" aria-hidden="true">🔗</a>
+        Setting properties from JavaScript [<code>patchCSSOM()</code>]
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div id="my-cssom-position-area-target" class="target">
+          position-area Target
+        </div>
+        <div id="my-cssom-anchor" class="anchor">Anchor</div>
+        <div id="my-cssom-target" class="target">anchor() Target</div>
+      </div>
+      <p class="note">
+        With polyfill applied: the position-area Target sits above the Anchor,
+        and the anchor() Target at its bottom right corner. Neither
+        <code>anchor-name</code>, <code>position-anchor</code> nor
+        <code>position-area</code> is declared in CSS here — all three are
+        assigned through the CSSOM, which a browser without native anchor
+        positioning drops on the floor unless
+        <a
+          href="https://github.com/oddbird/css-anchor-positioning#setting-anchor-properties-from-javascript"
+          ><code>patchCSSOM()</code></a
+        >
+        has been called. Note that it makes
+        <code>'anchorName' in element.style</code> true, so detect native
+        support with <code>CSS.supports('anchor-name: --a')</code> instead.
+      </p>
+      <pre><code class="language-html"
+>&lt;div id="my-cssom-position-area-target" class="target"&gt;position-area Target&lt;/div&gt;
+&lt;div id="my-cssom-anchor" class="anchor"&gt;Anchor&lt;/div&gt;
+&lt;div id="my-cssom-target" class="target"&gt;anchor() Target&lt;/div&gt;</code>
+
+<code class="language-css"
+>/* A CSSOM write re-serializes the declaration block, dropping the
+   `anchor()` values the browser does not understand, so those stay
+   in the stylesheet. */
+#my-cssom-target {
+  position: absolute;
+  top: anchor(bottom);
+  left: anchor(right);
+}
+
+#my-cssom-position-area-target {
+  position: absolute;
+}</code>
+
+<code class="language-js"
+>import polyfill, { patchCSSOM } from '@oddbird/css-anchor-positioning/fn';
+
+// Call before anything assigns these properties.
+patchCSSOM();
+
+document.getElementById('my-cssom-anchor').style.anchorName = '--my-cssom-anchor';
+
+const target = document.getElementById('my-cssom-target');
+target.style.positionAnchor = '--my-cssom-anchor';
+
+const positionAreaTarget = document.getElementById('my-cssom-position-area-target');
+positionAreaTarget.style.positionAnchor = '--my-cssom-anchor';
+positionAreaTarget.style.positionArea = 'top';
+
+if (!CSS.supports('anchor-name: --a')) await polyfill();</code></pre>
     </section>
     <section id="shadow-dom">
       <h2>
diff --git a/public/cssom.css b/public/cssom.css
new file mode 100644
index 0000000..1b2a95b
--- /dev/null
+++ b/public/cssom.css
@@ -0,0 +1,20 @@
+/* `anchor-name`, `position-anchor` and `position-area` are set from JavaScript
+   for this demo (see `patchCSSOM()` in index.html), so they are deliberately
+   absent here. Only what a CSSOM write cannot carry lives in this file: a write
+   re-serializes the declaration block from what the browser parsed, which drops
+   the `anchor()` values it does not understand. */
+
+#cssom .anchor {
+  inline-size: fit-content;
+  margin: 3em auto;
+}
+
+#my-cssom-target {
+  position: absolute;
+  top: anchor(bottom);
+  left: anchor(right);
+}
+
+#my-cssom-position-area-target {
+  position: absolute;
+}
diff --git a/shadow-dom.html b/shadow-dom.html
index 8ad0cb0..129a878 100644
--- a/shadow-dom.html
+++ b/shadow-dom.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="/demo.css" />
     <style>
       anchor-web-component,
+      anchor-position-area,
       anchor-adopted-styles {
         width: 100%;
       }
@@ -98,6 +99,57 @@
         }
         customElements.define('position-anchor-on-host', PositionAnchorOnHost);
 
+        // Anchor and target both live inside the shadow root, and the target
+        // is placed with `position-area` instead of individual `anchor()`
+        // insets. Styled by a `<style>` rather than an adopted stylesheet, so
+        // that this shadow root is not picked up by
+        // `patchAndPolyfillConstructedStylesheets()` and can be polyfilled
+        // with its own options below.
+        class AnchorPositionArea extends HTMLElement {
+          connectedCallback() {
+            this.shadowRoot ?? this.attachShadow({ mode: 'open' });
+
+            this.shadowRoot.innerHTML = `
+              <link rel="stylesheet" href="/demo.css" />
+              <style>
+                #shadow-position-area-anchor {
+                  margin-block-start: calc(1lh + 1rem);
+                  /* The polyfill centers a span-all axis on the containing
+                  block rather than on the anchor, so keep the narrow anchor
+                  centered in it to match the spec's anchor-center. */
+                  margin-inline: auto;
+                  width: 8em;
+                }
+                #shadow-position-area-target {
+                  /* Overrides the UA stylesheet's margin: auto for popovers. */
+                  margin: initial;
+                  position-area: top;
+                  text-align: center;
+                  width: 14em;
+                }
+              </style>
+              <div id="shadow-position-area-anchor" class="anchor">Anchor</div>
+              <div id="shadow-position-area-target" class="target" popover="manual">Target</div>
+            `;
+
+            // Set from JavaScript, the way a design system component would.
+            const anchor = this.shadowRoot.getElementById(
+              'shadow-position-area-anchor',
+            );
+            const target = this.shadowRoot.getElementById(
+              'shadow-position-area-target',
+            );
+            anchor.style.anchorName = target.style.positionAnchor =
+              '--shadow-position-area-anchor';
+
+            // Opened from the element itself rather than by an invoker, and
+            // `manual` so that a click elsewhere on the page does not light
+            // dismiss it.
+            target.showPopover();
+          }
+        }
+        customElements.define('anchor-position-area', AnchorPositionArea);
+
         // `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
@@ -142,19 +194,26 @@
           // Load the shadow entrypoint first so the `replaceSync` and
           // `adoptedStyleSheets` patches are installed before any custom
           // element's `connectedCallback` runs.
-          const { default: polyfill, patchAndPolyfillConstructedStylesheets } =
-            await import('/src/index-fn.ts');
+          const {
+            default: polyfill,
+            patchAndPolyfillConstructedStylesheets,
+            patchCSSOM,
+          } = await import('/src/index-fn.ts');
 
           // Patch Constructed stylesheets
           patchAndPolyfillConstructedStylesheets();
 
+          // Make `anchor-name` and `position-anchor` settable through the
+          // CSSOM, for the <anchor-position-area> demo below.
+          patchCSSOM();
+
           // Now define the custom elements
           defineCustomElements();
 
-          // Load the polyfill explicitly for the <anchor-web-component> and
-          // <anchor-pseudo-element> demos. The <anchor-adopted-styles> and
-          // <position-anchor-on-host> demos use `adoptedStyleSheets`, so they
-          // are already covered by the adopted stylesheet patch.
+          // Load the polyfill explicitly for the demos that don't use
+          // `adoptedStyleSheets`. The <anchor-adopted-styles> and
+          // <position-anchor-on-host> demos do, so they are already covered by
+          // the adopted stylesheet patch.
           await polyfill({
             roots: [
               document.querySelector('anchor-web-component').shadowRoot,
@@ -162,6 +221,15 @@
             ],
           });
 
+          // The <anchor-position-area> demo is positioned directly rather than
+          // wrapped: its target is a popover, and a popover is promoted to the
+          // top layer, where its containing block is the viewport rather than
+          // the `<polyfill-position-area>` wrapper.
+          await polyfill({
+            roots: [document.querySelector('anchor-position-area').shadowRoot],
+            positionAreaContainingBlock: false,
+          });
+
           btn.innerText = 'Polyfill Applied';
           btn.setAttribute('disabled', '');
         } else {
@@ -511,6 +579,108 @@ <h2>
 }
 customElements.define("position-anchor-on-host", PositionAnchorOnHost);
 &lt;/script&gt;
+</code></pre>
+    </section>
+    <section id="shadow-position-area" class="demo-item">
+      <h2>
+        <a href="#shadow-position-area" aria-hidden="true">🔗</a>
+        Works with <code>position-area</code> inside a shadow root
+      </h2>
+      <div class="demo-elements">
+        <anchor-position-area></anchor-position-area>
+      </div>
+      <div class="note">
+        <p>
+          With polyfill applied: the Target popover sits directly above the
+          Anchor, horizontally centered on it.
+        </p>
+        <p>
+          Both the anchor and the target live inside the shadow root, and the
+          target is a <code>popover="manual"</code> opened by the custom element
+          itself with <code>showPopover()</code> rather than by an invoker
+          button.
+        </p>
+        <p>
+          Like a design system component would, it sets
+          <code>anchor-name</code> and <code>position-anchor</code> from
+          JavaScript through the CSSOM. A browser that needs this polyfill does
+          not support those properties, and the CSSOM drops what it does not
+          know, so the assignments never become CSS declarations and nothing is
+          written to the <code>style</code> attributes the polyfill reads.
+          <code>patchCSSOM()</code> makes those properties settable, at the cost
+          of <code>'anchorName' in element.style</code> reporting support that
+          isn't there.
+        </p>
+        <p>
+          So detect native support with <code>CSS.supports()</code>, which the
+          patch leaves alone:
+        </p>
+
+        <pre><code class="language-js"
+>// Not this, `patchCSSOM()` makes it true:
+if (!('anchorName' in document.documentElement.style)) {
+}
+
+// This:
+if (!CSS.supports('anchor-name: --a')) {
+  const { default: polyfill, patchCSSOM } = await import(
+    '@oddbird/css-anchor-positioning/fn'
+  );
+
+  patchCSSOM();
+  await polyfill();
+}</code></pre>
+        <p>
+          A popover is promoted to the top layer, where its containing block is
+          the viewport rather than the
+          <code>&lt;polyfill-position-area&gt;</code>
+          wrapper, so this demo is polyfilled with
+          <code>positionAreaContainingBlock: false</code> and positioned
+          directly.
+        </p>
+      </div>
+
+      <pre><code class="language-html"
+>&lt;anchor-position-area&gt;&lt;/anchor-position-area&gt;
+&lt;script&gt;
+import polyfill, { patchCSSOM } from '@oddbird/css-anchor-positioning/fn';
+
+&lt;!-- Call before any connectedCallback runs, so the anchor properties
+are settable by the time an element wires up its anchor. --&gt;
+patchCSSOM();
+
+class AnchorPositionArea extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      &lt;style&gt;
+        #shadow-position-area-target {
+          margin: initial;
+          position-area: top;
+          width: 14em;
+        }
+      &lt;/style&gt;
+      &lt;div id="shadow-position-area-anchor"&gt;Anchor&lt;/div&gt;
+      &lt;div id="shadow-position-area-target" popover="manual"&gt;Popover (Target)&lt;/div&gt;
+    `;
+
+    const anchor = this.shadowRoot.getElementById("shadow-position-area-anchor"),
+      target = this.shadowRoot.getElementById("shadow-position-area-target");
+
+    // Dropped by the CSSOM without `patchCSSOM()`.
+    anchor.style.anchorName = target.style.positionAnchor =
+      "--shadow-position-area-anchor";
+
+    target.showPopover();
+  }
+}
+customElements.define("anchor-position-area", AnchorPositionArea);
+
+await polyfill({
+  roots: [document.querySelector("anchor-position-area").shadowRoot],
+  positionAreaContainingBlock: false,
+});
+&lt;/script&gt;
 </code></pre>
     </section>
     <section id="position-area-on-host" class="demo-item">
diff --git a/src/cascade.ts b/src/cascade.ts
index 6d26885..9cefe16 100644
--- a/src/cascade.ts
+++ b/src/cascade.ts
@@ -26,6 +26,12 @@ export const SHIFTED_PROPERTIES: Record<string, string> = [
   ...PADDING_PROPS,
   'anchor-scope',
   'anchor-name',
+  // Nothing reads the shifted `position-try` values (they are parsed out of the
+  // CSS text), but `patchCSSOM` needs somewhere to store them that survives
+  // being written back to a `style` attribute.
+  'position-try',
+  'position-try-fallbacks',
+  'position-try-order',
 ].reduce(
   (acc, prop) => {
     acc[prop] = `--${prop}-${INSTANCE_UUID}`;
@@ -34,6 +40,22 @@ export const SHIFTED_PROPERTIES: Record<string, string> = [
   {} as Record<string, string>,
 );
 
+/**
+ * The anchor positioning properties `patchCSSOM` makes settable through the
+ * CSSOM, each stored in its `SHIFTED_PROPERTIES` custom property. Every
+ * property from the spec except `position-visibility`, which the polyfill does
+ * not parse at all.
+ */
+export const CSSOM_PROPERTIES = [
+  'anchor-name',
+  'anchor-scope',
+  'position-anchor',
+  'position-area',
+  'position-try',
+  'position-try-fallbacks',
+  'position-try-order',
+];
+
 /**
  * Attribute marking a `<style>` element the polyfill generates itself -- the
  * non-inheritance reset below, and the position-area mapping styles in
@@ -136,6 +158,37 @@ export function registerShiftedProperties(
   }
 }
 
+/** Custom property `patchCSSOM` stores a value in, to the property it was set on. */
+const CSSOM_STORED_PROPERTIES: Record<string, string> = Object.fromEntries(
+  CSSOM_PROPERTIES.map((property) => [SHIFTED_PROPERTIES[property], property]),
+);
+
+/**
+ * Restore a declaration that `patchCSSOM` wrote to the property it stands in
+ * for, giving the rest of the polyfill the same shape it gets from author CSS
+ * -- so no parser has to know about the CSSOM.
+ * `shiftUnsupportedProperties` then puts the custom property back.
+ */
+function restoreCSSOMProperties(node: CssNode, block?: Block) {
+  if (!isDeclaration(node) || !block) {
+    return { updated: false };
+  }
+  const property = CSSOM_STORED_PROPERTIES[node.property];
+  if (!property) {
+    return { updated: false };
+  }
+  // Not when the rule already declares the property: this is the pair a shift
+  // produced (on this run, or on a previous one over CSS the polyfill has
+  // already transformed), and restoring would declare it twice.
+  for (const child of block.children) {
+    if (isDeclaration(child, property)) {
+      return { updated: false };
+    }
+  }
+  node.property = property;
+  return { updated: true };
+}
+
 /**
  * Shift property declarations for properties that are not yet natively
  * supported into custom properties.
@@ -249,12 +302,15 @@ export function cascadeCSS(
       visit: 'Declaration',
       enter(node) {
         const block = this.rule?.block;
+        // Before the steps below, so that a value set through the CSSOM is
+        // expanded and shifted like the declaration it stands in for.
+        const { updated: restored } = restoreCSSOMProperties(node, block);
         const { updated: shorthandUpdated } = expandInsetShorthands(
           node,
           block,
         );
         const { updated } = shiftUnsupportedProperties(node, block);
-        if (updated || shorthandUpdated) {
+        if (updated || shorthandUpdated || restored) {
           changed = true;
         }
       },
diff --git a/src/cssom.ts b/src/cssom.ts
new file mode 100644
index 0000000..fd74642
--- /dev/null
+++ b/src/cssom.ts
@@ -0,0 +1,104 @@
+import { CSSOM_PROPERTIES, SHIFTED_PROPERTIES } from './cascade.js';
+
+// Camel-case name to define on `CSSStyleDeclaration`, mapped to the CSS
+// property it writes.
+const PATCHED_PROPERTIES: Record<string, string> = Object.fromEntries(
+  CSSOM_PROPERTIES.map((property) => [
+    property.replace(/-([a-z])/g, (_, char: string) => char.toUpperCase()),
+    property,
+  ]),
+);
+
+const PATCHED_CSS_PROPERTIES: string[] = Object.values(PATCHED_PROPERTIES);
+
+let patched = false;
+
+/**
+ * Makes the anchor positioning properties settable through the CSSOM, so that
+ * anchors wired up from JavaScript — `element.style.anchorName = '--foo'` — are
+ * visible to the polyfill in browsers without native anchor positioning, which
+ * drop what they do not know before it reaches the `style` attribute.
+ *
+ * The value is stored in the custom property `cascadeCSS` would have shifted the
+ * declaration into anyway (`SHIFTED_PROPERTIES`), which the browser cannot drop,
+ * and `cascadeCSS` restores it to the property it was set on. That keeps all the
+ * bookkeeping out of here, so `CSSStyleDeclaration` is the only thing patched.
+ *
+ * This is opt-in, and does nothing when anchor positioning is supported
+ * natively, because it has a side effect worth knowing about: defining these
+ * properties makes `'anchorName' in document.documentElement.style` return
+ * `true`, which is a common way to detect native support. Use
+ * `CSS.supports('anchor-name: --a')` for that instead — it is unaffected.
+ *
+ * Values set before this is called are not picked up; call it as early as
+ * possible, alongside the other patches.
+ */
+export function patchCSSOM() {
+  if (patched || CSS.supports('anchor-name: --a')) return;
+  patched = true;
+
+  const { getPropertyValue, removeProperty, setProperty } =
+    CSSStyleDeclaration.prototype;
+
+  // Writes through the native accessors, so the patched ones below can call
+  // this without recursing.
+  const writeValue = (
+    style: CSSStyleDeclaration,
+    cssProperty: string,
+    value: string | null,
+    priority?: string,
+  ) => {
+    const property = SHIFTED_PROPERTIES[cssProperty];
+    const trimmed = `${value ?? ''}`.trim();
+    if (trimmed) {
+      setProperty.call(style, property, trimmed, priority);
+    } else {
+      removeProperty.call(style, property);
+    }
+  };
+
+  // The property this declaration stores `cssProperty` in, for the properties
+  // we own; anything else is passed through untouched.
+  const storedAs = (cssProperty: string) =>
+    PATCHED_CSS_PROPERTIES.includes(cssProperty)
+      ? SHIFTED_PROPERTIES[cssProperty]
+      : cssProperty;
+
+  for (const [property, cssProperty] of Object.entries(PATCHED_PROPERTIES)) {
+    Object.defineProperty(CSSStyleDeclaration.prototype, property, {
+      configurable: true,
+      enumerable: true,
+      get(this: CSSStyleDeclaration) {
+        return getPropertyValue.call(this, SHIFTED_PROPERTIES[cssProperty]);
+      },
+      set(this: CSSStyleDeclaration, value: string) {
+        writeValue(this, cssProperty, value);
+      },
+    });
+  }
+
+  // The dashed form goes through these, and is dropped just the same.
+  CSSStyleDeclaration.prototype.setProperty = function (
+    property: string,
+    value: string | null,
+    priority?: string,
+  ) {
+    if (PATCHED_CSS_PROPERTIES.includes(property)) {
+      writeValue(this, property, value, priority);
+      return;
+    }
+    return setProperty.call(this, property, value, priority);
+  };
+
+  CSSStyleDeclaration.prototype.getPropertyValue = function (
+    property: string,
+  ): string {
+    return getPropertyValue.call(this, storedAs(property));
+  };
+
+  CSSStyleDeclaration.prototype.removeProperty = function (
+    property: string,
+  ): string {
+    return removeProperty.call(this, storedAs(property));
+  };
+}
diff --git a/src/fallback.ts b/src/fallback.ts
index c748dce..e93437a 100644
--- a/src/fallback.ts
+++ b/src/fallback.ts
@@ -41,6 +41,7 @@ import {
   getSelectors,
   INSTANCE_UUID,
   isAnchorFunction,
+  isDeclaration,
   splitCommaList,
   type StyleData,
 } from './utils.js';
@@ -121,28 +122,6 @@ type PositionTryObject =
   | PositionTryDefAtRule
   | PositionTryDefAtRuleWithTactic;
 
-function isDeclaration(node: CssNode): node is DeclarationWithValue {
-  return node.type === 'Declaration';
-}
-
-function isPositionTryFallbacksDeclaration(
-  node: CssNode,
-): node is DeclarationWithValue {
-  return (
-    node.type === 'Declaration' && node.property === 'position-try-fallbacks'
-  );
-}
-
-function isPositionTryOrderDeclaration(
-  node: CssNode,
-): node is DeclarationWithValue {
-  return node.type === 'Declaration' && node.property === 'position-try-order';
-}
-
-function isPositionTryDeclaration(node: CssNode): node is DeclarationWithValue {
-  return node.type === 'Declaration' && node.property === 'position-try';
-}
-
 function isPositionTryAtRule(node: CssNode): node is AtRuleRaw {
   return node.type === 'Atrule' && node.name === 'position-try';
 }
@@ -452,7 +431,10 @@ function parsePositionTryFallbacks(list: List<CssNode>) {
 }
 
 function getPositionTryFallbacksDeclaration(node: Declaration) {
-  if (isPositionTryFallbacksDeclaration(node) && node.value.children.first) {
+  if (
+    isDeclaration(node, 'position-try-fallbacks') &&
+    node.value.children.first
+  ) {
     return parsePositionTryFallbacks(node.value.children);
   }
   return [];
@@ -462,7 +444,7 @@ export function getPositionTryDeclaration(node: Declaration): {
   order?: PositionTryOrder;
   options?: PositionTryObject[];
 } {
-  if (isPositionTryDeclaration(node) && node.value.children.first) {
+  if (isDeclaration(node, 'position-try') && node.value.children.first) {
     const declarationNode = clone(node) as DeclarationWithValue;
     let order: PositionTryOrder | undefined;
     // get potential order
@@ -479,7 +461,7 @@ export function getPositionTryDeclaration(node: Declaration): {
 }
 
 function getPositionTryOrderDeclaration(node: Declaration) {
-  if (isPositionTryOrderDeclaration(node) && node.value.children.first) {
+  if (isDeclaration(node, 'position-try-order') && node.value.children.first) {
     return {
       order: (node.value.children.first as Identifier).name as PositionTryOrder,
     };
diff --git a/src/fetch.ts b/src/fetch.ts
index 93ce851..4a0b6ec 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -96,7 +96,16 @@ export function hasInlineAnchorStyles(el: HTMLElement) {
     // 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)];
+    // The shifted custom properties are terms in their own right: `patchCSSOM`
+    // writes a CSSOM-set `anchor-name`/`position-anchor` straight into the
+    // custom property the declaration would have been shifted into, so the
+    // `style` attribute never contains the plain property name. Their `--`
+    // prefix also keeps them from matching the plain terms at a boundary.
+    const terms = [
+      'anchor',
+      ...Object.keys(SHIFTED_PROPERTIES),
+      ...Object.values(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(
@@ -110,9 +119,23 @@ export function hasInlineAnchorStyles(el: HTMLElement) {
 // 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[]) {
+function fetchInlineStyles(
+  roots: AnchorPositioningRoot[],
+  elements?: HTMLElement[],
+) {
   const elementsWithInlineAnchorStyles: HTMLElement[] = (
-    elements ?? Array.from(document.querySelectorAll<HTMLElement>('[style]'))
+    elements ??
+      // The document is searched as well as the roots: a run scoped to a shadow
+      // root still needs inline styles from the outer tree, where its host and
+      // any light-DOM anchors live. Searching the roots on top of that is what
+      // finds inline styles *inside* a shadow root, which
+      // `document.querySelectorAll()` does not reach.
+      [
+        ...new Set([
+          ...document.querySelectorAll<HTMLElement>('[style]'),
+          ...querySelectorAllRoots(roots, '[style]'),
+        ]),
+      ]
   ).filter((el) => el instanceof HTMLElement && hasInlineAnchorStyles(el));
   const inlineStyles: Partial<StyleData>[] = [];
 
@@ -187,7 +210,7 @@ export async function fetchCSS(
     ? (options.elements ?? [])
     : undefined;
 
-  const inlines = fetchInlineStyles(elementsForInlines);
+  const inlines = fetchInlineStyles(options.roots, elementsForInlines);
 
   // Collect constructed stylesheets adopted on the polyfill roots. Skipped when
   // an explicit `elements` list is provided, as that opts into element-only
diff --git a/src/index-fn.ts b/src/index-fn.ts
index 9bc262d..333f729 100644
--- a/src/index-fn.ts
+++ b/src/index-fn.ts
@@ -2,6 +2,7 @@ import './global.js';
 
 import { polyfill } from './polyfill.js';
 
+export { patchCSSOM } from './cssom.js';
 export {
   type ConstructedStylesheetsPolyfillOptions,
   patchAndPolyfillConstructedStylesheets,
diff --git a/src/parse.ts b/src/parse.ts
index 368b448..4edf4e9 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -53,6 +53,7 @@ import {
   getRootStyleContainer,
   getSelectors,
   isAnchorFunction,
+  isDeclaration,
   type StyleData,
 } from './utils.js';
 import { validatedForPositioning } from './validate.js';
@@ -108,14 +109,6 @@ export interface TryBlock {
   declarations: Partial<Record<AcceptedPositionTryProperty, string>>;
 }
 
-function isAnchorNameDeclaration(node: CssNode): node is DeclarationWithValue {
-  return node.type === 'Declaration' && node.property === 'anchor-name';
-}
-
-function isAnchorScopeDeclaration(node: CssNode): node is DeclarationWithValue {
-  return node.type === 'Declaration' && node.property === 'anchor-scope';
-}
-
 function isAnchorSizeFunction(node: CssNode | null): node is FunctionNode {
   return Boolean(
     node && node.type === 'Function' && node.name === 'anchor-size',
@@ -273,6 +266,10 @@ function getAnchorFunctionData(node: CssNode, declaration: Declaration | null) {
  * to the element's own tree (e.g. an inline style on a shadow host, in the light
  * DOM) from one inherited via a shadow-scoped `:host` rule. Only the former may
  * reference an anchor in the host's outer tree.
+ *
+ * Matched at a declaration boundary rather than as a substring, so the property
+ * appearing in a *value* (`anchor-name: --position-anchor-x`) or as part of
+ * another property (`--my-position-anchor`) does not count.
  */
 function hasInlinePositionAnchor(el: HTMLElement): boolean {
   const style = el.getAttribute('style');
@@ -363,7 +360,7 @@ export async function parseCSS(
       const selectors = getSelectors(rule);
 
       // Parse `anchor-name` declaration
-      if (isAnchorNameDeclaration(node) && selectors.length) {
+      if (isDeclaration(node, 'anchor-name') && selectors.length) {
         for (const name of getAnchorNames(node)) {
           anchorNames[name] ??= [];
           anchorNames[name].push(...selectors);
@@ -371,7 +368,7 @@ export async function parseCSS(
       }
 
       // Parse `anchor-scope` declarations
-      if (isAnchorScopeDeclaration(node) && selectors.length) {
+      if (isDeclaration(node, 'anchor-scope') && selectors.length) {
         for (const name of getAnchorNames(node)) {
           anchorScopes[name] ??= [];
           anchorScopes[name].push(...selectors);
diff --git a/src/polyfill.ts b/src/polyfill.ts
index 9e190f3..1d2d6e1 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -303,7 +303,7 @@ export const getPixelValue = async ({
   return fallback;
 };
 
-// Use `isPositionAreaDeclaration` instead for type narrowing AST nodes.
+// Use `isDeclaration(node, 'position-area')` instead for type narrowing AST nodes.
 const isPositionAreaTarget = (
   value: AnchorFunction | PositionAreaTargetData,
 ): value is PositionAreaTargetData => {
diff --git a/src/position-area.ts b/src/position-area.ts
index e9e8873..da0e92a 100644
--- a/src/position-area.ts
+++ b/src/position-area.ts
@@ -53,6 +53,7 @@ import {
 import {
   type DeclarationWithValue,
   INSTANCE_UUID,
+  isDeclaration,
   PA_INSET_SIDES,
   type PaValueProp,
   paValueProperties,
@@ -542,12 +543,6 @@ export interface PositionAreaTargetData {
   targetEl: HTMLElement;
 }
 
-function isPositionAreaDeclaration(
-  node: CssNode,
-): node is DeclarationWithValue {
-  return node.type === 'Declaration' && node.property === 'position-area';
-}
-
 function parsePositionAreaValue(node: DeclarationWithValue) {
   const value = (node.value.children as List<Identifier>)
     .toArray()
@@ -565,7 +560,7 @@ function parsePositionAreaValue(node: DeclarationWithValue) {
 export function getPositionAreaDeclaration(
   node: CssNode,
 ): PositionAreaDeclaration | undefined {
-  if (!isPositionAreaDeclaration(node)) return undefined;
+  if (!isDeclaration(node, 'position-area')) return undefined;
 
   const value = parsePositionAreaValue(node);
   // If it's not a valid value, we can ignore it.
diff --git a/src/transform.ts b/src/transform.ts
index ac26c2c..158383f 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,7 +1,10 @@
 import { POLYFILLED_STYLE_ATTRIBUTE } from './cascade.js';
 import type { AnchorPositioningRoot } from './polyfill.js';
 import {
+  generateCSS,
   type GeneratedStyles,
+  getAST,
+  getRootStyleContainer,
   type StyleData,
   writeAdoptedStylesheet,
 } from './utils.js';
@@ -27,6 +30,30 @@ const excludeAttributes = [
   'type',
 ];
 
+/**
+ * Splits the transformed CSS for an element's inline styles into the element's
+ * own declarations and any rules the polyfill added alongside them -- a
+ * generated `@position-try` block, for a target declaring
+ * `position-try-fallbacks` inline. A `style` attribute holds declarations and
+ * not rules, so those need a stylesheet of their own.
+ */
+function splitInlineStyles(css: string, selector: string) {
+  const ast = getAST(css);
+  let declarations = '';
+  const rules: string[] = [];
+  if (ast.type === 'StyleSheet') {
+    for (const node of ast.children) {
+      if (node.type === 'Rule' && generateCSS(node.prelude) === selector) {
+        // A generated block includes its braces.
+        declarations = generateCSS(node.block).slice(1, -1);
+      } else {
+        rules.push(generateCSS(node));
+      }
+    }
+  }
+  return { declarations, rules: rules.join('') };
+}
+
 export function transformCSS(
   styleData: StyleData[],
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
@@ -73,9 +100,20 @@ export function transformCSS(
         // Handle inline styles
         const attr = el.getAttribute('data-has-inline-styles');
         if (attr) {
-          const pre = `[data-has-inline-styles="${attr}"]{`;
-          const post = `}`;
-          let styles = css.slice(pre.length, 0 - post.length);
+          const { declarations, rules } = splitInlineStyles(
+            css,
+            `[data-has-inline-styles="${attr}"]`,
+          );
+          let styles = declarations;
+          if (rules) {
+            const container = getRootStyleContainer(el);
+            if (container) {
+              const styleEl = document.createElement('style');
+              styleEl.setAttribute(POLYFILLED_STYLE_ATTRIBUTE, 'true');
+              styleEl.textContent = rules;
+              container.append(styleEl);
+            }
+          }
           // Check for custom anchor-element mapping, so it is not overwritten
           // when inline styles are updated
           const mappings = inlineStyles?.get(el);
diff --git a/src/utils.ts b/src/utils.ts
index a15777b..91bce05 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -56,8 +56,15 @@ export function generateCSS(ast: CssNode) {
   });
 }
 
-export function isDeclaration(node: CssNode): node is DeclarationWithValue {
-  return node.type === 'Declaration';
+/** Whether the node is a declaration, optionally of a given property. */
+export function isDeclaration(
+  node: CssNode,
+  property?: string,
+): node is DeclarationWithValue {
+  return (
+    node.type === 'Declaration' &&
+    (property === undefined || node.property === property)
+  );
 }
 
 export function getDeclarationValue(node: DeclarationWithValue) {
diff --git a/tests/e2e/cssom.test.ts b/tests/e2e/cssom.test.ts
new file mode 100644
index 0000000..4b895a0
--- /dev/null
+++ b/tests/e2e/cssom.test.ts
@@ -0,0 +1,322 @@
+import { expect, type Page, test } from '@playwright/test';
+
+// `patchCSSOM()` makes the anchor positioning properties the polyfill supports
+// settable through the CSSOM. Without it a browser with no native anchor
+// positioning drops those assignments, so they never reach the `style`
+// attribute the polyfill reads. Each test here wires a demo up the way a design
+// system component would -- from JavaScript, never from CSS text -- and checks
+// that the polyfill acted on it.
+
+test.beforeEach(async ({ page }) => {
+  // Listen for all console logs
+  // eslint-disable-next-line no-console
+  page.on('console', (msg) => console.log(msg.text()));
+  await page.goto('/');
+});
+
+interface Box {
+  top: number;
+  left: number;
+  bottom: number;
+}
+
+/**
+ * Adds `styles` and `html` to the page, applies `cssom` -- `[id, property,
+ * value]`, set through `CSSStyleDeclaration` -- and polyfills the page. Returns
+ * each requested element's box relative to the element with id `container`.
+ *
+ * Note that only valid declarations can be set inline here: a CSSOM write
+ * re-serializes the declaration block from what the browser parsed, dropping
+ * the `anchor()` values it does not understand. Those belong in `styles`.
+ */
+async function polyfillWithCSSOM(
+  page: Page,
+  {
+    styles,
+    html,
+    cssom,
+    ids,
+  }: {
+    styles: string;
+    html: string;
+    cssom: [string, string, string][];
+    ids: string[];
+  },
+): Promise<Record<string, Box>> {
+  return await page.evaluate(
+    async ({ styles, html, cssom, ids }) => {
+      // 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, patchCSSOM } = await import(fnEntry);
+
+      // Before any value is set: an assignment made before the patch is
+      // installed is dropped like any other.
+      patchCSSOM();
+
+      const styleEl = document.createElement('style');
+      styleEl.textContent = styles;
+      document.head.append(styleEl);
+      const wrapper = document.createElement('div');
+      wrapper.innerHTML = html;
+      document.body.append(wrapper);
+
+      for (const [id, property, value] of cssom) {
+        const el = document.getElementById(id)!;
+        // Both spellings go through the patch: the camel-case property and the
+        // dashed `setProperty()` form.
+        if (property.includes('-')) {
+          el.style.setProperty(property, value);
+        } else {
+          (el.style as unknown as Record<string, string>)[property] = value;
+        }
+      }
+
+      await polyfill();
+
+      const container = document
+        .getElementById('container')!
+        .getBoundingClientRect();
+      const boxes: Record<string, Box> = {};
+      for (const id of ids) {
+        const { top, left, bottom } = document
+          .getElementById(id)!
+          .getBoundingClientRect();
+        boxes[id] = {
+          top: top - container.top,
+          left: left - container.left,
+          bottom: bottom - container.top,
+        };
+      }
+      return boxes;
+    },
+    { styles, html, cssom, ids },
+  );
+}
+
+test('applies a `position-area` set through the CSSOM', async ({ page }) => {
+  const boxes = await polyfillWithCSSOM(page, {
+    styles: '',
+    html: `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="anchor" style="position: absolute; top: 150px; left: 100px; width: 60px; height: 20px"></div>
+        <div id="target" style="position: absolute; width: 40px; height: 30px"></div>
+      </div>`,
+    cssom: [
+      ['anchor', 'anchorName', '--cssom-position-area'],
+      ['target', 'position-anchor', '--cssom-position-area'],
+      ['target', 'positionArea', 'top'],
+    ],
+    ids: ['anchor', 'target'],
+  });
+
+  // `position-area: top` puts the target's bottom edge on the anchor's top
+  // edge. Its static position is the top of the container, so this only holds
+  // if the `position-area` was seen.
+  expect(boxes.target.bottom).toBeCloseTo(boxes.anchor.top, 0);
+});
+
+test('applies an `anchor-scope` set through the CSSOM', async ({ page }) => {
+  const boxes = await polyfillWithCSSOM(page, {
+    styles: `
+      #inside, #outside {
+        position: absolute;
+        top: anchor(bottom);
+        left: anchor(right);
+        width: 20px;
+        height: 20px;
+      }`,
+    html: `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="scope" style="position: relative; width: 200px; height: 100px">
+          <div id="anchor" style="position: absolute; top: 20px; left: 20px; width: 60px; height: 20px"></div>
+          <div id="inside"></div>
+        </div>
+        <div id="outside"></div>
+      </div>`,
+    cssom: [
+      ['anchor', 'anchorName', '--cssom-anchor-scope'],
+      ['scope', 'anchorScope', '--cssom-anchor-scope'],
+      ['inside', 'position-anchor', '--cssom-anchor-scope'],
+      ['outside', 'position-anchor', '--cssom-anchor-scope'],
+    ],
+    ids: ['anchor', 'inside', 'outside'],
+  });
+
+  // Inside the scope the anchor resolves, so the target sits on its
+  // bottom-right corner.
+  expect(boxes.inside.top).toBeCloseTo(boxes.anchor.bottom, 0);
+  expect(boxes.inside.left).toBeCloseTo(80, 0);
+  // Outside it the name is out of scope, so `anchor()` never resolves and the
+  // target stays at its static position -- below the 100px-tall scope element,
+  // not on the anchor.
+  expect(boxes.outside.top).toBeCloseTo(100, 0);
+  expect(boxes.outside.left).toBeCloseTo(0, 0);
+});
+
+test('applies `position-try-fallbacks` set through the CSSOM', async ({
+  page,
+}) => {
+  const boxes = await polyfillWithCSSOM(page, {
+    styles: `
+      #target {
+        position: absolute;
+        top: anchor(bottom);
+        left: anchor(left);
+        width: 40px;
+        height: 100px;
+      }
+      @position-try --cssom-flip {
+        bottom: anchor(top);
+        top: revert;
+      }`,
+    html: `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="anchor" style="position: absolute; top: 250px; left: 40px; width: 60px; height: 20px"></div>
+        <div id="target"></div>
+      </div>`,
+    cssom: [
+      ['anchor', 'anchorName', '--cssom-position-try'],
+      ['target', 'position-anchor', '--cssom-position-try'],
+      ['target', 'positionTryFallbacks', '--cssom-flip'],
+    ],
+    ids: ['anchor', 'target'],
+  });
+
+  // The target is anchored horizontally, which only holds if `anchor()`
+  // resolved -- guarding against a trivial pass where nothing was positioned.
+  expect(boxes.target.left).toBeCloseTo(boxes.anchor.left, 0);
+  // The base position (below the anchor) overflows the 300px container, so the
+  // fallback flips the target above its anchor.
+  expect(boxes.target.bottom).toBeCloseTo(boxes.anchor.top, 0);
+});
+
+test('applies the `position-try` shorthand set through the CSSOM', async ({
+  page,
+}) => {
+  const boxes = await polyfillWithCSSOM(page, {
+    styles: `
+      #target {
+        position: absolute;
+        top: anchor(bottom);
+        left: anchor(left);
+        width: 40px;
+        height: 100px;
+      }
+      @position-try --cssom-shorthand-flip {
+        bottom: anchor(top);
+        top: revert;
+      }`,
+    html: `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="anchor" style="position: absolute; top: 250px; left: 40px; width: 60px; height: 20px"></div>
+        <div id="target"></div>
+      </div>`,
+    cssom: [
+      ['anchor', 'anchorName', '--cssom-shorthand'],
+      ['target', 'position-anchor', '--cssom-shorthand'],
+      // The shorthand carries a `position-try-order` as well, which the
+      // polyfill parses but does not act on (see the README limitations).
+      ['target', 'positionTry', 'most-height --cssom-shorthand-flip'],
+    ],
+    ids: ['anchor', 'target'],
+  });
+
+  expect(boxes.target.left).toBeCloseTo(boxes.anchor.left, 0);
+  expect(boxes.target.bottom).toBeCloseTo(boxes.anchor.top, 0);
+});
+
+test('keeps working when the same properties are set again', async ({
+  page,
+}) => {
+  // A CSSOM write re-serializes the declaration block, so a second write has to
+  // find the value the polyfill left behind rather than a property the browser
+  // has already dropped.
+  const boxes = await polyfillWithCSSOM(page, {
+    styles: `
+      #target {
+        position: absolute;
+        top: anchor(bottom);
+        left: anchor(right);
+        width: 20px;
+        height: 20px;
+      }`,
+    html: `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="anchor" style="position: absolute; top: 20px; left: 20px; width: 60px; height: 20px"></div>
+        <div id="other" style="position: absolute; top: 150px; left: 150px; width: 60px; height: 20px"></div>
+        <div id="target"></div>
+      </div>`,
+    cssom: [
+      ['anchor', 'anchorName', '--cssom-first'],
+      ['other', 'anchorName', '--cssom-second'],
+      ['target', 'position-anchor', '--cssom-first'],
+      // Re-pointed at the other anchor before the polyfill runs.
+      ['target', 'position-anchor', '--cssom-second'],
+    ],
+    ids: ['anchor', 'other', 'target'],
+  });
+
+  expect(boxes.target.top).toBeCloseTo(boxes.other.bottom, 0);
+  expect(boxes.target.left).toBeCloseTo(210, 0);
+});
+
+test('resolves an outer-tree anchor for a host whose `position-anchor` is set through the CSSOM', async ({
+  page,
+}) => {
+  // A `position-anchor` on a shadow host may only reach an anchor in the host's
+  // outer tree when it is declared in that tree -- which `hasInlinePositionAnchor`
+  // decides by reading the `style` attribute. A CSSOM-set value only appears
+  // there as the property once `cascadeCSS` has restored it and `transformCSS`
+  // has written it back, so this pins that those run before `parseCSS`.
+  const boxes = await page.evaluate(async () => {
+    const fnEntry = '/src/index-fn.ts';
+    const { default: polyfill, patchCSSOM } = await import(fnEntry);
+    patchCSSOM();
+
+    class HostEl extends HTMLElement {
+      connectedCallback() {
+        if (this.shadowRoot) return;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot!.innerHTML = `
+          <style>
+            :host { position: absolute; top: anchor(bottom); left: anchor(left); }
+          </style><slot></slot>`;
+      }
+    }
+    customElements.define('cssom-host', HostEl);
+
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = `
+      <div id="container" style="position: relative; width: 300px; height: 300px">
+        <div id="anchor" style="position: absolute; top: 100px; left: 60px; width: 60px; height: 20px"></div>
+        <cssom-host id="host">Target</cssom-host>
+      </div>`;
+    document.body.append(wrapper);
+
+    const anchor = document.getElementById('anchor')!;
+    const host = document.getElementById('host')!;
+    anchor.style.anchorName = '--cssom-host-anchor';
+    host.style.setProperty('position-anchor', '--cssom-host-anchor');
+
+    // Scoped to the component's own shadow root, so the anchor in the outer
+    // tree is only reachable because the host declares `position-anchor` there.
+    await polyfill({ roots: [host.shadowRoot!] });
+
+    const container = document
+      .getElementById('container')!
+      .getBoundingClientRect();
+    const rel = (el: HTMLElement) => {
+      const { top, left, bottom } = el.getBoundingClientRect();
+      return {
+        top: top - container.top,
+        left: left - container.left,
+        bottom: bottom - container.top,
+      };
+    };
+    return { anchor: rel(anchor), host: rel(host) };
+  });
+
+  expect(boxes.host.top).toBeCloseTo(boxes.anchor.bottom, 0);
+  expect(boxes.host.left).toBeCloseTo(boxes.anchor.left, 0);
+});
diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts
index 4b0d0d0..49ac03b 100644
--- a/tests/e2e/polyfill.test.ts
+++ b/tests/e2e/polyfill.test.ts
@@ -515,3 +515,47 @@ test('emulates non-inheritance of shifted properties without `CSS.registerProper
   expect(containerHeight).toBe('400px');
   expect(targetHeight).toBe('');
 });
+
+test('applies polyfill for properties set through the CSSOM', async ({
+  page,
+}) => {
+  // The `#cssom` demo declares none of `anchor-name`, `position-anchor` or
+  // `position-area` in CSS -- all three are assigned from JavaScript, which only
+  // reaches the polyfill because the page calls `patchCSSOM()`.
+  const boxes = async () =>
+    await page.evaluate(() => {
+      const rel = (id: string) => {
+        const container = document
+          .querySelector('#cssom .demo-elements')!
+          .getBoundingClientRect();
+        const { top, left, bottom, right } = document
+          .getElementById(id)!
+          .getBoundingClientRect();
+        return {
+          top: top - container.top,
+          left: left - container.left,
+          bottom: bottom - container.top,
+          right: right - container.left,
+        };
+      };
+      return {
+        anchor: rel('my-cssom-anchor'),
+        target: rel('my-cssom-target'),
+        positionArea: rel('my-cssom-position-area-target'),
+      };
+    });
+
+  // `patchCSSOM()` makes the properties settable, but it does not position
+  // anything on its own.
+  const before = await boxes();
+  expect(before.target.top).not.toBeCloseTo(before.anchor.bottom, 0);
+
+  await applyPolyfill(page);
+
+  const after = await boxes();
+  // `anchor()` insets put this target on the anchor's bottom right corner.
+  expect(after.target.top).toBeCloseTo(after.anchor.bottom, 0);
+  expect(after.target.left).toBeCloseTo(after.anchor.right, 0);
+  // `position-area: top` puts this one directly above the anchor.
+  expect(after.positionArea.bottom).toBeCloseTo(after.anchor.top, 0);
+});
diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts
index ba48585..198ded5 100644
--- a/tests/e2e/shadow-dom.test.ts
+++ b/tests/e2e/shadow-dom.test.ts
@@ -673,3 +673,53 @@ test('emulates non-inheritance of shifted properties inside a shadow root withou
   expect(result.containerHeight).toBe('400px');
   expect(result.targetHeight).toBe('');
 });
+
+test('picks up anchors set through the CSSOM', async ({ page }) => {
+  // `patchCSSOM()` makes `anchor-name` and `position-anchor` settable through
+  // the CSSOM. Without it those assignments are dropped by a browser that has
+  // no native anchor positioning, and never reach the `style` attribute the
+  // polyfill reads. The elements live in a shadow root, so this also covers
+  // inline styles being collected per polyfill root rather than from
+  // `document`.
+  await applyPolyfill(page);
+
+  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 host = document.createElement('div');
+    host.id = 'cssom-anchors';
+    document.body.append(host);
+
+    const shadow = host.attachShadow({ mode: 'open' });
+    shadow.innerHTML = `
+      <style>
+        #target { position: absolute; top: anchor(bottom); left: anchor(right); }
+      </style>
+      <div style="position: relative">
+        <span id="anchor">Anchor</span>
+        <div id="target">Target</div>
+      </div>`;
+
+    const anchor = shadow.getElementById('anchor')!,
+      target = shadow.getElementById('target')!;
+
+    anchor.style.anchorName = '--cssom-anchor';
+    target.style.positionAnchor = '--cssom-anchor';
+
+    await polyfill({ roots: [shadow] });
+  });
+
+  const anchor = page.locator('#cssom-anchors #anchor');
+  const target = page.locator('#cssom-anchors #target');
+
+  const anchorBox = (await anchor.boundingBox())!;
+  const targetBox = (await target.boundingBox())!;
+
+  // `top: anchor(bottom)` and `left: anchor(right)` put the target's top-left
+  // corner on the anchor's bottom-right corner.
+  expect(targetBox.y).toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+  expect(targetBox.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+});
diff --git a/tests/unit/cascade.test.ts b/tests/unit/cascade.test.ts
index 0ad13e2..fdeffc2 100644
--- a/tests/unit/cascade.test.ts
+++ b/tests/unit/cascade.test.ts
@@ -1,5 +1,6 @@
 import {
   cascadeCSS,
+  CSSOM_PROPERTIES,
   registerShiftedProperties,
   SHIFTED_PROPERTIES,
 } from '../../src/cascade.js';
@@ -95,6 +96,40 @@ describe('cascadeCSS', () => {
   });
 });
 
+describe('restoreCSSOMProperties', () => {
+  it.each(CSSOM_PROPERTIES)(
+    'restores a `%s` value stored by patchCSSOM',
+    (property) => {
+      // `patchCSSOM` stores the value in the shifted custom property, because a
+      // browser without native anchor positioning drops the property itself.
+      // Restoring it here is what lets every later stage treat a CSSOM-set
+      // value as the ordinary declaration it stands in for.
+      const css = cascadeCSSForTest(
+        `#target{${SHIFTED_PROPERTIES[property]}:--foo}`,
+      );
+      expect(css).toContain(`${property}:--foo`);
+      // ...and it is shifted back, so the value survives being written to the
+      // `style` attribute again.
+      expect(css).toContain(`${SHIFTED_PROPERTIES[property]}:--foo`);
+    },
+  );
+
+  it('leaves the pair a shift produced alone', () => {
+    // The polyfill re-reads its own transformed CSS on a later run, where the
+    // property and its shifted custom property are both present. Restoring
+    // there would declare the property twice, and each run would add another.
+    const css = cascadeCSSForTest(
+      `#target{anchor-name:--foo;${SHIFTED_PROPERTIES['anchor-name']}:--foo}`,
+    );
+    expect(css.match(/anchor-name:--foo/g)).toHaveLength(1);
+  });
+
+  it('does not restore custom properties it does not own', () => {
+    const css = cascadeCSSForTest(`#target{--anchor-name:--foo}`);
+    expect(css).toBe('#target{--anchor-name:--foo}');
+  });
+});
+
 describe('expandInsetShorthands', () => {
   it.each([
     [
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 9e4405d..f76735e 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -52,7 +52,9 @@ describe('transformCSS', () => {
     expect(newLink.textContent).toBe('html { margin: 0; }');
 
     expect(style.innerHTML).toBe('html { padding: 0; }');
-    expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue;');
+    // The declarations are re-serialized out of the rule rather than sliced out
+    // of the CSS text, so the source's trailing `;` is not carried over.
+    expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue');
     expect(div2.getAttribute('style')).toBe('color: red;');
     // `data-has-inline-styles` is intentionally retained so its id stays stable
     // across (possibly concurrent) polyfill runs.