diff --git a/index.html b/index.html
index f570dfbe..4441d27b 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
     <link rel="stylesheet" href="/anchor-implicit.css" />
     <link rel="stylesheet" href="/anchor-update.css" />
     <link rel="stylesheet" href="/anchor-absolute.css" />
+    <link rel="stylesheet" href="/anchor-added.css" />
     <style>
       #my-anchor-style-tag {
         anchor-name: --my-anchor-style-tag;
@@ -43,18 +44,31 @@
       }
     </style>
     <script type="module">
-      import polyfill from '/src/index-fn.ts';
+      import { polyfill, restore } from '/src/index-fn.ts';
 
       const btn = document.getElementById('apply-polyfill');
+      let applied = false;
+      window.polyfill = polyfill;
+      window.restore = restore;
 
       if (!('anchorName' in document.documentElement.style)) {
-        btn.addEventListener('click', () =>
-          polyfill().then((rules) => {
-            btn.innerText = 'Polyfill Applied';
-            btn.setAttribute('disabled', '');
-            console.log(rules);
-          }),
-        );
+        btn.addEventListener('click', () => {
+          btn.setAttribute('disabled', '');
+          if (applied) {
+            restore().then(() => {
+              applied = false;
+              btn.innerText = 'Apply Polyfill';
+              btn.removeAttribute('disabled');
+            });
+          } else {
+            polyfill().then((rules) => {
+              console.log(rules);
+              applied = true;
+              btn.innerText = 'Unapply Polyfill';
+              btn.removeAttribute('disabled');
+            });
+          }
+        });
       } else {
         btn.innerText = 'No Polyfill Needed';
         btn.setAttribute('disabled', '');
@@ -62,18 +76,6 @@
           'anchor-positioning is supported in this browser; polyfill skipped.',
         );
       }
-
-      const updateBtn = document.getElementById('toggle-anchor-width');
-      const updateAnchor = document.getElementById('my-anchor-update');
-      updateBtn.addEventListener('click', () => {
-        if (updateAnchor.getAttribute('data-small')) {
-          updateAnchor.setAttribute('data-large', true);
-          updateAnchor.removeAttribute('data-small');
-        } else {
-          updateAnchor.setAttribute('data-small', true);
-          updateAnchor.removeAttribute('data-large');
-        }
-      });
     </script>
     <script src="https://unpkg.com/prismjs@v1.x/components/prism-core.min.js"></script>
     <script src="https://unpkg.com/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
@@ -682,13 +684,27 @@ <h2>
     <section id="anchor-update" class="demo-item">
       <h2>
         <a href="#anchor-update" aria-hidden="true">🔗</a>
-        Dynamically update anchors
+        Dynamically updated anchors
       </h2>
       <div style="position: relative" class="demo-elements">
         <div id="my-anchor-update" class="anchor">Anchor</div>
         <div id="my-target-update" class="target">Target</div>
       </div>
       <button id="toggle-anchor-width">Toggle anchor width</button>
+      <script>
+        document
+          .getElementById('toggle-anchor-width')
+          .addEventListener('click', () => {
+            const updateAnchor = document.getElementById('my-anchor-update');
+            if (updateAnchor.getAttribute('data-small')) {
+              updateAnchor.setAttribute('data-large', true);
+              updateAnchor.removeAttribute('data-small');
+            } else {
+              updateAnchor.setAttribute('data-small', true);
+              updateAnchor.removeAttribute('data-large');
+            }
+          });
+      </script>
       <p class="note">
         With polyfill applied: Target and Anchor's right edges line up. Target's
         top edge lines up with the bottom edge of the Anchor.
@@ -768,6 +784,66 @@ <h2>
   position: absolute;
   top: anchor(--my-anchor-absolute bottom);
   left: anchor(--my-anchor-absolute right);
+}</code></pre>
+    </section>
+    <section id="anchor-added" class="demo-item">
+      <h2>
+        <a href="#anchor-added" aria-hidden="true">🔗</a>
+        Dynamically added anchors
+      </h2>
+      <div
+        style="position: relative"
+        class="demo-elements"
+        id="my-anchor-added-container"
+      >
+        <div id="my-anchor-added-original" class="anchor">Original Anchor</div>
+        <div id="my-target-added" class="target">Target</div>
+      </div>
+      <button id="add-anchor">Add anchor</button>
+      <script>
+        document.getElementById('add-anchor').addEventListener('click', () => {
+          const addBtn = document.getElementById('add-anchor');
+          let addedAnchor = document.getElementById('my-anchor-added-new');
+          if (addedAnchor) {
+            addedAnchor.remove();
+            addBtn.innerText = 'Add anchor';
+            window.polyfill();
+          } else {
+            addedAnchor = document.createElement('div');
+            addedAnchor.id = 'my-anchor-added-new';
+            addedAnchor.classList.add('anchor');
+            addedAnchor.innerText = 'Added Anchor';
+            document
+              .getElementById('my-anchor-added-container')
+              .prepend(addedAnchor);
+            addBtn.innerText = 'Remove anchor';
+            window.polyfill();
+          }
+        });
+      </script>
+      <p class="note">
+        With polyfill applied: Target and original Anchor's right edges line up.
+        Target's top edge lines up with the top edge of the original Anchor.
+        <br />
+        <br />
+        When another valid Anchor is added earlier in the DOM order and the
+        polyfill is re-applied, Target position updates relative to the added
+        Anchor.
+      </p>
+      <pre><code class="language-css"
+>#my-anchor-added-new {
+  anchor-name: --my-anchor-added;
+  margin-bottom: 1rem;
+}
+
+#my-anchor-added-original {
+  anchor-name: --my-anchor-added;
+}
+
+#my-target-added {
+  position: absolute;
+  left: anchor(--my-anchor-added right);
+  top: anchor(--my-anchor-added top);
 }</code></pre>
     </section>
     <section id="sponsor">
diff --git a/public/anchor-added.css b/public/anchor-added.css
new file mode 100644
index 00000000..85ce3012
--- /dev/null
+++ b/public/anchor-added.css
@@ -0,0 +1,14 @@
+#my-anchor-added-new {
+  anchor-name: --my-anchor-added;
+  margin-bottom: 1rem;
+}
+
+#my-anchor-added-original {
+  anchor-name: --my-anchor-added;
+}
+
+#my-target-added {
+  position: absolute;
+  left: anchor(--my-anchor-added right);
+  top: anchor(--my-anchor-added top);
+}
diff --git a/public/demo.css b/public/demo.css
index 40306d4a..b7e24516 100644
--- a/public/demo.css
+++ b/public/demo.css
@@ -155,7 +155,7 @@ footer p {
 
 /* prettier-ignore */
 [href*='://']::after {
-  content: ' ↗';
+  content: '\a0↗';
 }
 
 nav a:any-link,
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..17efb8bc
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,3 @@
+export const POLYFILL_ID_ATTR = 'data-anchor-polyfill-id';
+export const INLINE_STYLES_ID_ATTR = 'data-anchor-polyfill-inline-styles-id';
+export const TARGET_STYLE_ATTR = 'data-anchor-polyfill-target-style';
diff --git a/src/fetch.ts b/src/fetch.ts
index 7d414e88..1f28d9a2 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid/non-secure';
 
+import { INLINE_STYLES_ID_ATTR } from './constants.js';
 import { type StyleData } from './utils.js';
 
 export function isStyleLink(link: HTMLLinkElement): link is HTMLLinkElement {
@@ -26,15 +27,14 @@ async function fetchLinkedStylesheets(
       // fetch css and add to array
       const response = await fetch(data.url.toString());
       const css = await response.text();
-      return { ...data, css } as StyleData;
+      return { ...data, css, original: css } as StyleData;
     }),
   );
 }
 
 // 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.
+// For each element found, adds a new data attribute with a random UUID value,
+// and then formats the styles in the same manner as CSS from style tags.
 function fetchInlineStyles() {
   const elementsWithInlineAnchorStyles: NodeListOf<HTMLElement> =
     document.querySelectorAll('[style*="anchor"]');
@@ -42,11 +42,10 @@ function fetchInlineStyles() {
 
   elementsWithInlineAnchorStyles.forEach((el) => {
     const selector = nanoid(12);
-    const dataAttribute = 'data-has-inline-styles';
-    el.setAttribute(dataAttribute, selector);
-    const styles = el.getAttribute('style');
-    const css = `[${dataAttribute}="${selector}"] { ${styles} }`;
-    inlineStyles.push({ el, css });
+    el.setAttribute(INLINE_STYLES_ID_ATTR, selector);
+    const styles = el.getAttribute('style') as string;
+    const css = `[${INLINE_STYLES_ID_ATTR}="${selector}"] { ${styles} }`;
+    inlineStyles.push({ el, css, original: styles });
   });
 
   return inlineStyles;
@@ -65,7 +64,7 @@ export async function fetchCSS(): Promise<StyleData[]> {
       }
     }
     if (el.tagName.toLowerCase() === 'style') {
-      sources.push({ el, css: el.innerHTML });
+      sources.push({ el, css: el.innerHTML, original: el.innerHTML });
     }
   });
 
diff --git a/src/index-fn.ts b/src/index-fn.ts
index f70a79a2..1a01517d 100644
--- a/src/index-fn.ts
+++ b/src/index-fn.ts
@@ -1,3 +1,5 @@
-import { polyfill } from './polyfill.js';
+import { polyfill, restore } from './polyfill.js';
+
+export { polyfill, restore };
 
 export default polyfill;
diff --git a/src/parse.ts b/src/parse.ts
index ea104e88..0c179230 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -1,6 +1,7 @@
 import * as csstree from 'css-tree';
 import { nanoid } from 'nanoid/non-secure';
 
+import { POLYFILL_ID_ATTR, TARGET_STYLE_ATTR } from './constants.js';
 import {
   type DeclarationWithValue,
   generateCSS,
@@ -524,7 +525,7 @@ export async function parseCSS(styleData: StyleData[]) {
           }
           // Add each `@try` block, scoped to a unique data-attr
           for (const block of fallbacks[name].blocks) {
-            const dataAttr = `[data-anchor-polyfill="${block.uuid}"]`;
+            const dataAttr = `[${POLYFILL_ID_ATTR}="${block.uuid}"]`;
             this.stylesheet?.children.prependData({
               type: 'Rule',
               prelude: {
@@ -927,7 +928,7 @@ export async function parseCSS(styleData: StyleData[]) {
   for (const [targetSel, anchorFns] of Object.entries(anchorFunctions)) {
     let targets: NodeListOf<HTMLElement>;
     if (
-      targetSel.startsWith('[data-anchor-polyfill=') &&
+      targetSel.startsWith(`[${POLYFILL_ID_ATTR}=`) &&
       fallbackTargets[targetSel]
     ) {
       // If we're dealing with a `@position-fallback` `@try` block,
@@ -951,13 +952,16 @@ export async function parseCSS(styleData: StyleData[]) {
             ...(inlineStyles.get(targetEl) ?? {}),
             [anchorObj.uuid]: uuid,
           });
+          const original = targetEl.getAttribute('style') ?? '';
           // Point original uuid to new uuid
           targetEl.setAttribute(
             'style',
-            `${anchorObj.uuid}: var(${uuid}); ${
-              targetEl.getAttribute('style') ?? ''
-            }`,
+            `${anchorObj.uuid}: var(${uuid}); ${original}`,
           );
+          if (!targetEl.hasAttribute(TARGET_STYLE_ATTR)) {
+            // Store original styles (for potential later restoration)
+            targetEl.setAttribute(TARGET_STYLE_ATTR, original);
+          }
           // Populate new data for each anchor/target combo
           validPositions[targetSel] = {
             ...validPositions[targetSel],
diff --git a/src/polyfill.ts b/src/polyfill.ts
index f942e754..904e6b6c 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -7,6 +7,7 @@ import {
 } from '@floating-ui/dom';
 
 import { cascadeCSS } from './cascade.js';
+import { POLYFILL_ID_ATTR, TARGET_STYLE_ATTR } from './constants.js';
 import { fetchCSS } from './fetch.js';
 import {
   type AnchorFunction,
@@ -22,7 +23,8 @@ import {
   type SizingProperty,
   type TryBlock,
 } from './parse.js';
-import { transformCSS } from './transform.js';
+import { replaceLink, transformCSS } from './transform.js';
+import { type StyleData } from './utils.js';
 
 const platformWithCache = { ...platform, _c: new Map() };
 
@@ -282,6 +284,7 @@ async function applyAnchorPositions(
   useAnimationFrame = false,
 ) {
   const root = document.documentElement;
+  const cleanups: (() => void)[] = [];
 
   for (const [property, anchorValues] of Object.entries(declarations) as [
     InsetProperty | SizingProperty,
@@ -291,7 +294,7 @@ async function applyAnchorPositions(
       const anchor = anchorValue.anchorEl;
       const target = anchorValue.targetEl;
       if (anchor && target) {
-        autoUpdate(
+        const cleanup = autoUpdate(
           anchor,
           target,
           async () => {
@@ -312,6 +315,7 @@ async function applyAnchorPositions(
           },
           { animationFrame: useAnimationFrame },
         );
+        cleanups.push(cleanup);
       } else {
         // Use fallback value
         const resolved = await getPixelValue({
@@ -324,6 +328,7 @@ async function applyAnchorPositions(
       }
     }
   }
+  return cleanups;
 }
 
 async function applyPositionFallbacks(
@@ -331,8 +336,9 @@ async function applyPositionFallbacks(
   fallbacks: TryBlock[],
   useAnimationFrame = false,
 ) {
+  const cleanups: (() => void)[] = [];
   if (!fallbacks.length) {
-    return;
+    return cleanups;
   }
 
   const targets: NodeListOf<HTMLElement> = document.querySelectorAll(targetSel);
@@ -340,7 +346,7 @@ async function applyPositionFallbacks(
   for (const target of targets) {
     let checking = false;
     const offsetParent = await getOffsetParent(target);
-    autoUpdate(
+    const cleanup = autoUpdate(
       target,
       target,
       async () => {
@@ -354,7 +360,7 @@ async function applyPositionFallbacks(
         // reach one that does not cause the target's margin-box to overflow
         // its offsetParent (containing block).
         for (const [index, { uuid }] of fallbacks.entries()) {
-          target.setAttribute('data-anchor-polyfill', uuid);
+          target.setAttribute(POLYFILL_ID_ATTR, uuid);
           if (index === fallbacks.length - 1) {
             checking = false;
             break;
@@ -388,37 +394,57 @@ async function applyPositionFallbacks(
       },
       { animationFrame: useAnimationFrame },
     );
+    cleanups.push(cleanup);
   }
+  return cleanups;
 }
 
 async function position(rules: AnchorPositions, useAnimationFrame = false) {
+  const cleanups = [];
   for (const pos of Object.values(rules)) {
     // Handle `anchor()` and `anchor-size()` functions...
-    await applyAnchorPositions(pos.declarations ?? {}, useAnimationFrame);
+    cleanups.push(
+      ...(await applyAnchorPositions(
+        pos.declarations ?? {},
+        useAnimationFrame,
+      )),
+    );
   }
 
   for (const [targetSel, position] of Object.entries(rules)) {
     // Handle `@position-fallback` blocks...
-    await applyPositionFallbacks(
-      targetSel,
-      position.fallbacks ?? [],
-      useAnimationFrame,
+    cleanups.push(
+      ...(await applyPositionFallbacks(
+        targetSel,
+        position.fallbacks ?? [],
+        useAnimationFrame,
+      )),
     );
   }
+  return cleanups;
 }
 
+let styleData: StyleData[] = [];
+let rootStyle: string | null = null;
+let cleanups: (() => void)[] = [];
+let polyfilled = false;
+
 export async function polyfill(animationFrame?: boolean) {
+  if (polyfilled) {
+    await restore();
+  }
+  rootStyle = document.documentElement.getAttribute('style');
   const useAnimationFrame =
     animationFrame === undefined
       ? Boolean(window.UPDATE_ANCHOR_ON_ANIMATION_FRAME)
       : animationFrame;
   // fetch CSS from stylesheet and inline style
-  let styleData = await fetchCSS();
+  styleData = await fetchCSS();
 
   // pre parse CSS styles that we need to cascade
   const cascadeCausedChanges = await cascadeCSS(styleData);
   if (cascadeCausedChanges) {
-    styleData = await transformCSS(styleData);
+    await transformCSS(styleData);
   }
   // parse CSS
   const { rules, inlineStyles } = await parseCSS(styleData);
@@ -428,8 +454,49 @@ export async function polyfill(animationFrame?: boolean) {
     await transformCSS(styleData, inlineStyles, true);
 
     // calculate position values
-    await position(rules, useAnimationFrame);
+    cleanups = await position(rules, useAnimationFrame);
   }
 
+  polyfilled = true;
   return rules;
 }
+
+export async function restore() {
+  for (const cleanup of cleanups) {
+    cleanup();
+  }
+  document.querySelectorAll(`[${POLYFILL_ID_ATTR}]`).forEach((el) => {
+    el.removeAttribute(POLYFILL_ID_ATTR);
+  });
+  document.querySelectorAll(`[${TARGET_STYLE_ATTR}]`).forEach((el) => {
+    const original = el.getAttribute(TARGET_STYLE_ATTR);
+    if (original) {
+      el.setAttribute('style', original);
+    } else {
+      el.removeAttribute('style');
+    }
+    el.removeAttribute(TARGET_STYLE_ATTR);
+  });
+  for (const { el, original, changed, url } of styleData) {
+    if (changed) {
+      if (el.tagName.toLowerCase() === 'style') {
+        el.innerHTML = original;
+      } else if (el.tagName.toLowerCase() === 'link') {
+        if (url) {
+          await replaceLink(el as HTMLLinkElement, original, url);
+        }
+      } else {
+        el.setAttribute('style', original);
+      }
+    }
+  }
+  if (rootStyle) {
+    document.documentElement.setAttribute('style', rootStyle);
+  } else {
+    document.documentElement.removeAttribute('style');
+  }
+  styleData = [];
+  rootStyle = null;
+  cleanups = [];
+  polyfilled = false;
+}
diff --git a/src/transform.ts b/src/transform.ts
index 3a7ebdcf..a07cfdd8 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,37 +1,52 @@
+import { INLINE_STYLES_ID_ATTR } from './constants.js';
 import { type StyleData } from './utils.js';
 
+export async function replaceLink(
+  el: HTMLLinkElement,
+  contents: string,
+  url?: URL,
+) {
+  // Create new link
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  let blobUrl;
+  if (url) {
+    link.href = url.toString();
+  } else {
+    const blob = new Blob([contents], { type: 'text/css' });
+    blobUrl = URL.createObjectURL(blob);
+    link.href = blobUrl;
+  }
+  const promise = new Promise((res) => {
+    link.onload = res;
+  });
+  el.replaceWith(link);
+  // Wait for new stylesheet to be loaded
+  await promise;
+  if (blobUrl) {
+    URL.revokeObjectURL(blobUrl);
+  }
+  return link;
+}
+
 export async function transformCSS(
   styleData: StyleData[],
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
   cleanup = false,
 ) {
-  const updatedStyleData: StyleData[] = [];
-  for (const { el, css, changed } of styleData) {
-    const updatedObject: StyleData = { el, css, changed: false };
-    if (changed) {
+  styleData.forEach(async (data) => {
+    const { el, css, changed, updated } = data;
+    if (changed && !updated) {
       if (el.tagName.toLowerCase() === 'style') {
         // Handle inline stylesheets
         el.innerHTML = css;
       } else if (el.tagName.toLowerCase() === 'link') {
-        // Create new link
-        const blob = new Blob([css], { type: 'text/css' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = url;
-        const promise = new Promise((res) => {
-          link.onload = res;
-        });
-        el.replaceWith(link);
-        // Wait for new stylesheet to be loaded
-        await promise;
-        URL.revokeObjectURL(url);
-        updatedObject.el = link;
-      } else if (el.hasAttribute('data-has-inline-styles')) {
+        data.el = await replaceLink(el as HTMLLinkElement, css);
+      } else if (el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
         // Handle inline styles
-        const attr = el.getAttribute('data-has-inline-styles');
+        const attr = el.getAttribute(INLINE_STYLES_ID_ATTR);
         if (attr) {
-          const pre = `[data-has-inline-styles="${attr}"]{`;
+          const pre = `[${INLINE_STYLES_ID_ATTR}="${attr}"]{`;
           const post = `}`;
           let styles = css.slice(pre.length, 0 - post.length);
           // Check for custom anchor-element mapping, so it is not overwritten
@@ -45,12 +60,11 @@ export async function transformCSS(
           el.setAttribute('style', styles);
         }
       }
+      data.updated = true;
     }
     // Remove no-longer-needed data-attribute
-    if (cleanup && el.hasAttribute('data-has-inline-styles')) {
-      el.removeAttribute('data-has-inline-styles');
+    if (cleanup && el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
+      el.removeAttribute(INLINE_STYLES_ID_ATTR);
     }
-    updatedStyleData.push(updatedObject);
-  }
-  return updatedStyleData;
+  });
 }
diff --git a/src/utils.ts b/src/utils.ts
index 39053b47..5390e2cd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -30,6 +30,8 @@ export interface StyleData {
   css: string;
   url?: URL;
   changed?: boolean;
+  original: string;
+  updated?: boolean;
 }
 
 export const POSITION_ANCHOR_PROPERTY = `--position-anchor-${nanoid(12)}`;
diff --git a/tests/unit/cascade.test.ts b/tests/unit/cascade.test.ts
index 679092d0..fa89f5dc 100644
--- a/tests/unit/cascade.test.ts
+++ b/tests/unit/cascade.test.ts
@@ -6,7 +6,7 @@ describe('cascadeCSS', () => {
   it('moves position-anchor to custom property', async () => {
     const srcCSS = getSampleCSS('position-anchor');
     const styleData: StyleData[] = [
-      { css: srcCSS, el: document.createElement('div') },
+      { css: srcCSS, el: document.createElement('div'), original: srcCSS },
     ];
     const cascadeCausedChanges = await cascadeCSS(styleData);
     expect(cascadeCausedChanges).toBe(true);
diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
index 6bfb1f8d..909818e5 100644
--- a/tests/unit/fetch.test.ts
+++ b/tests/unit/fetch.test.ts
@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 
+import { INLINE_STYLES_ID_ATTR } from '../../src/constants.js';
 import { fetchCSS } from '../../src/fetch.js';
 import { getSampleCSS } from '../helpers.js';
 
@@ -87,11 +88,11 @@ describe('fetch inline styles', () => {
     expect(styleData).toHaveLength(4);
     expect(styleData[2].url).toBeUndefined();
     expect(styleData[3].url).toBeUndefined();
-    expect(styleData[2].css.trim()).toContain('[data-has-inline-styles=');
+    expect(styleData[2].css.trim()).toContain(`[${INLINE_STYLES_ID_ATTR}=`);
     expect(styleData[2].css.trim()).toContain(
       'top: anchor(--my-anchor-in-line end)',
     );
-    expect(styleData[3].css.trim()).toContain('[data-has-inline-styles=');
+    expect(styleData[3].css.trim()).toContain(`[${INLINE_STYLES_ID_ATTR}=`);
     expect(styleData[3].css.trim()).toContain(
       'anchor-name: --my-anchor-in-line',
     );
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
index 28a8507d..71155f10 100644
--- a/tests/unit/parse.test.ts
+++ b/tests/unit/parse.test.ts
@@ -1,3 +1,4 @@
+import { POLYFILL_ID_ATTR } from '../../src/constants.js';
 import { type AnchorPositions, parseCSS } from '../../src/parse.js';
 import { POSITION_ANCHOR_PROPERTY, type StyleData } from '../../src/utils.js';
 import { getSampleCSS, sampleBaseCSS } from './../helpers.js';
@@ -704,7 +705,7 @@ describe('parseCSS', () => {
       },
     };
     for (const { uuid } of rules['#my-target-fallback']?.fallbacks ?? []) {
-      expected[`[data-anchor-polyfill="${uuid}"]`] = {
+      expected[`[${POLYFILL_ID_ATTR}="${uuid}"]`] = {
         declarations: expect.any(Object),
       };
     }
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index d6afc725..c00ed914 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -1,3 +1,4 @@
+import { INLINE_STYLES_ID_ATTR } from '../../src/constants.js';
 import { transformCSS } from '../../src/transform.js';
 
 describe('transformCSS', () => {
@@ -14,25 +15,38 @@ describe('transformCSS', () => {
       </style>
     `;
     document.body.innerHTML = `
-      <div id="div" data-has-inline-styles="key" style="--foo: var(--bar); color: red;" />
-      <div id="div2" data-has-inline-styles="key2" style="color: red;" />
+      <div id="div" ${INLINE_STYLES_ID_ATTR}="key" style="--foo: var(--bar); color: red;" />
+      <div id="div2" ${INLINE_STYLES_ID_ATTR}="key2" style="color: red;" />
     `;
     let link = document.querySelector('link') as HTMLLinkElement;
     const style = document.querySelector('style') as HTMLStyleElement;
     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,
+        original: 'html { margin: 1; }',
+        url: new URL(link.href, document.baseURI),
+      },
+      {
+        el: style,
+        css: 'html { padding: 0; }',
+        changed: true,
+        original: 'p { color: red; }',
+      },
       {
         el: div,
-        css: '[data-has-inline-styles="key"]{color:blue;}',
+        css: `[${INLINE_STYLES_ID_ATTR}="key"]{color:blue;}`,
         changed: true,
+        original: '--foo: var(--bar); color: red;',
       },
       {
         el: div2,
-        css: '[data-has-inline-styles="key2"]{color:blue;}',
+        css: `[${INLINE_STYLES_ID_ATTR}="key2"]{color:red;}`,
         changed: false,
+        original: 'color: red;',
       },
     ];
     const inlineStyles = new Map();
@@ -46,7 +60,7 @@ describe('transformCSS', () => {
     expect(style.innerHTML).toBe('html { padding: 0; }');
     expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue;');
     expect(div2.getAttribute('style')).toBe('color: red;');
-    expect(div.hasAttribute('data-has-inline-styles')).toBeFalsy();
-    expect(div2.hasAttribute('data-has-inline-styles')).toBeFalsy();
+    expect(div.hasAttribute(INLINE_STYLES_ID_ATTR)).toBeFalsy();
+    expect(div2.hasAttribute(INLINE_STYLES_ID_ATTR)).toBeFalsy();
   });
 });