diff --git a/.gitignore b/.gitignore
index 7709bf62..1d849e9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,7 @@ lib-cov
 coverage
 *.lcov
 playwright-report
+test-results
 
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
diff --git a/index.html b/index.html
index 7fd4e44f..2acdddd0 100644
--- a/index.html
+++ b/index.html
@@ -47,13 +47,20 @@
         bottom: anchor(--my-anchor-style-tag start);
         right: anchor(--my-anchor-style-tag left);
       }
+
+      #anchor-manual .anchor {
+        inline-size: fit-content;
+        margin: 3rem auto;
+      }
     </style>
     <script type="module">
       import polyfill from '/src/index-fn.ts';
 
+      const SUPPORTS_ANCHOR_POSITIONING = CSS.supports('anchor-name: --a');
+
       const btn = document.getElementById('apply-polyfill');
 
-      if (!('anchorName' in document.documentElement.style)) {
+      if (!SUPPORTS_ANCHOR_POSITIONING) {
         btn.addEventListener('click', () =>
           polyfill().then((rules) => {
             btn.innerText = 'Polyfill Applied';
@@ -80,6 +87,116 @@
           updateAnchor.removeAttribute('data-large');
         }
       });
+
+      function prepareManualPolyfill() {
+        // anchor style element
+        const anchorStyleEl = document.createElement('style');
+        anchorStyleEl.id = 'my-style-manual-anchor';
+        anchorStyleEl.textContent = [
+          '#my-anchor-manual {',
+          'anchor-name: --my-anchor-manual;',
+          '}',
+        ].join('');
+
+        // style element
+        const styleEl = document.createElement('style');
+        styleEl.id = 'my-style-manual-style-el';
+        styleEl.textContent = [
+          '#my-target-manual-style-el {',
+          'position: absolute;',
+          'bottom: anchor(--my-anchor-manual top);',
+          'right: anchor(--my-anchor-manual left);',
+          '}',
+        ].join('');
+
+        // link element
+        const linkEl = document.createElement('link');
+        linkEl.id = 'my-style-manual-link-el';
+        linkEl.rel = 'stylesheet';
+        linkEl.href = '/anchor-manual.css';
+
+        document.head.append(anchorStyleEl, styleEl, linkEl);
+
+        // inline style
+        document
+          .getElementById('my-target-manual-inline-style')
+          ?.setAttribute(
+            'style',
+            [
+              'position: absolute',
+              'top: anchor(--my-anchor-manual bottom)',
+              'left: anchor(--my-anchor-manual right)',
+            ].join(';'),
+          );
+      }
+
+      // These event listeners are for E2E testing only
+      document
+        .getElementById('prepare-manual-polyfill')
+        ?.addEventListener('click', () => prepareManualPolyfill(), {
+          once: true,
+        });
+      document
+        .getElementById('apply-polyfill-manually-set1')
+        ?.addEventListener('click', () => {
+          polyfill({
+            elements: [
+              document.getElementById('my-style-manual-anchor'),
+              document.getElementById('my-style-manual-style-el'),
+            ],
+            excludeInlineStyles: true,
+          });
+        });
+      document
+        .getElementById('apply-polyfill-manually-set2')
+        ?.addEventListener('click', () => {
+          polyfill({
+            elements: [
+              document.getElementById('my-style-manual-anchor'),
+              document.getElementById('my-style-manual-link-el'),
+              document.getElementById('my-target-manual-inline-style'),
+            ],
+            excludeInlineStyles: true,
+          });
+        });
+      document
+        .getElementById('apply-polyfill-manually-set3')
+        ?.addEventListener('click', () => {
+          polyfill({
+            elements: [
+              document.getElementById('my-style-manual-anchor'),
+              document.getElementById('my-style-manual-style-el'),
+            ],
+          });
+        });
+
+      const manualBtn = document.getElementById('apply-polyfill-manually');
+      if (SUPPORTS_ANCHOR_POSITIONING) {
+        manualBtn.innerText = 'Load Anchor Positioning CSS';
+      }
+      manualBtn.addEventListener('click', () => {
+        prepareManualPolyfill();
+
+        if (!SUPPORTS_ANCHOR_POSITIONING) {
+          polyfill({
+            elements: [
+              document.getElementById('my-style-manual-anchor'),
+              document.getElementById('my-style-manual-link-el'),
+              document.getElementById('my-style-manual-style-el'),
+              document.getElementById('my-target-manual-inline-style'),
+            ],
+          }).then((rules) => {
+            manualBtn.innerText = 'Polyfill Applied';
+            console.log(rules);
+          });
+        } else {
+          manualBtn.innerText = 'Anchor Positioning CSS applied';
+          console.log(
+            'anchor-positioning is supported in this browser; polyfill skipped.',
+          );
+        }
+        manualBtn.setAttribute('disabled', '');
+      });
     </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>
@@ -1003,6 +1120,86 @@ <h2>
   top: anchor(--my-anchor-media-query top);
   right: anchor(--my-anchor-media-query right);
 }</code></pre>
+    </section>
+    <section id="anchor-manual" class="demo-item" style="position: relative">
+      <h2>
+        <a href="#manual" aria-hidden="true">🔗</a>
+        Manually apply polyfill to specific styles
+      </h2>
+      <button id="apply-polyfill-manually">Polyfill these elements</button>
+      <div id="anchor-manual-test-buttons" hidden>
+        <!-- These buttons are for E2E testing only -->
+        <button id="prepare-manual-polyfill">Prepare</button>
+        <button id="apply-polyfill-manually-set1">Polyfill target 1</button>
+        <button id="apply-polyfill-manually-set2">
+          Polyfill target 2 and 3
+        </button>
+        <button id="apply-polyfill-manually-set3">
+          Polyfill target 1 and 3
+        </button>
+      </div>
+      <div class="demo-elements">
+        <div id="my-anchor-manual" class="anchor">Anchor</div>
+        <div id="my-target-manual-style-el" class="target">
+          Target 1 (with <code>&lt;style&gt;</code>)
+        </div>
+        <div id="my-target-manual-link-el" class="target">
+          Target 2 (with <code>&lt;link&gt;</code>)
+        </div>
+        <div id="my-target-manual-inline-style" class="target">
+          Target 3 (with inline style)
+        </div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target 1, 2, and 3 are positioned at Anchor’s
+        top-left, top-right, and bottom-right corners respectively.
+      </p>
+      <pre><code class="language-html" data-dependencies="css,js">&lt;style id="my-style-manual-anchor"&gt;
+  #my-anchor-manual {
+    anchor-name: --my-anchor-manual;
+  }
+&lt;/style&gt;
+&lt;style id="my-style-manual-style-el"&gt;
+  #my-target-manual-style-el {
+    position: absolute;
+    bottom: anchor(--my-anchor-manual top);
+    right: anchor(--my-anchor-manual left);
+  }
+&lt;/style&gt;
+&lt;link rel="stylesheet" href="/anchor-manual.css" id="my-style-manual-link-el" /&gt;
+&lt;!--
+CSS inside the anchor-manual.css file:
+
+#my-target-manual-link-el {
+  position: absolute;
+  bottom: anchor(--my-anchor-manual top);
+  left: anchor(--my-anchor-manual right);
+}
+--&gt;
+
+&lt;div id="my-anchor-manual" class="anchor"&gt;...&lt;/div&gt;
+&lt;div id="my-target-manual-style-el" class="target"&gt;...&lt;/div&gt;
+&lt;div id="my-target-manual-link-el" class="target"&gt;...&lt;/div&gt;
+&lt;div id="my-target-manual-inline-style" class="target"
+  style="position: absolute;
+    top: anchor(--my-anchor-manual bottom);
+    left: anchor(--my-anchor-manual right);"
+&gt;...&lt;/div&gt;
+
+&lt;script&gt;
+  polyfill({
+    elements: [
+      // The &lt;style&gt; element for anchor
+      document.getElementById('my-style-manual-anchor'),
+      // The &lt;style&gt; element
+      document.getElementById('my-style-manual-style-el'),
+      // The &lt;link&gt; element
+      document.getElementById('my-style-manual-link-el'),
+      // The target element with inline styles
+      document.getElementById('my-target-manual-inline-style'),
+    ],
+  });
+&lt;/script&gt;</code></pre>
     </section>
     <section id="sponsor">
       <h2>Sponsor OddBird's OSS Work</h2>
diff --git a/public/anchor-manual.css b/public/anchor-manual.css
new file mode 100644
index 00000000..b696f5f7
--- /dev/null
+++ b/public/anchor-manual.css
@@ -0,0 +1,5 @@
+#my-target-manual-link-el {
+  position: absolute;
+  bottom: anchor(--my-anchor-manual top);
+  left: anchor(--my-anchor-manual right);
+}
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
index bfa0790b..8b210023 100644
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -1,8 +1,26 @@
 export {};
 
 declare global {
+  interface AnchorPositioningPolyfillOptions {
+    // Whether to use `requestAnimationFrame()` when updating target elements’
+    // positions
+    useAnimationFrame?: boolean;
+
+    // An array of explicitly targeted elements to polyfill
+    elements?: HTMLElement[];
+
+    // Whether to exclude elements with eligible inline styles. When not defined
+    // or set to `false`, the polyfill will be applied to all elements that have
+    // eligible inline styles, regardless of whether the `elements` option is
+    // defined. When set to `true`, elements with eligible inline styles listed
+    // in the `elements` option will still be polyfilled, but no other elements
+    // in the document will be implicitly polyfilled.
+    excludeInlineStyles?: boolean;
+  }
+
   interface Window {
     UPDATE_ANCHOR_ON_ANIMATION_FRAME?: boolean;
+    ANCHOR_POSITIONING_POLYFILL_OPTIONS?: AnchorPositioningPolyfillOptions;
     CHECK_LAYOUT_DELAY?: boolean;
   }
 }
diff --git a/src/fetch.ts b/src/fetch.ts
index ed974a5b..9408f9d1 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -51,45 +51,62 @@ async function fetchLinkedStylesheets(
   return results.filter((loaded) => loaded !== null);
 }
 
+const ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY = '[style*="anchor"]';
 // 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() {
-  const elementsWithInlineAnchorStyles: NodeListOf<HTMLElement> =
-    document.querySelectorAll('[style*="anchor"]');
+function fetchInlineStyles(elements?: HTMLElement[]) {
+  const elementsWithInlineAnchorStyles: HTMLElement[] = elements
+    ? elements.filter(
+        (el) =>
+          el instanceof HTMLElement &&
+          el.matches(ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY),
+      )
+    : Array.from(
+        document.querySelectorAll(ELEMENTS_WITH_INLINE_ANCHOR_STYLES_QUERY),
+      );
   const inlineStyles: Partial<StyleData>[] = [];
 
-  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 });
-  });
+  elementsWithInlineAnchorStyles
+    .filter((el) => el instanceof HTMLElement)
+    .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 });
+    });
 
   return inlineStyles;
 }
 
-export async function fetchCSS(): Promise<StyleData[]> {
-  const elements: NodeListOf<HTMLElement> =
-    document.querySelectorAll('link, style');
+export async function fetchCSS(
+  elements?: HTMLElement[],
+  excludeInlineStyles?: boolean,
+): Promise<StyleData[]> {
+  const targetElements: HTMLElement[] =
+    elements ?? Array.from(document.querySelectorAll('link, style'));
   const sources: Partial<StyleData>[] = [];
 
-  elements.forEach((el) => {
-    if (el.tagName.toLowerCase() === 'link') {
-      const url = getStylesheetUrl(el as HTMLLinkElement);
-      if (url) {
-        sources.push({ el, url });
+  targetElements
+    .filter((el) => el instanceof HTMLElement)
+    .forEach((el) => {
+      if (el.tagName.toLowerCase() === 'link') {
+        const url = getStylesheetUrl(el as HTMLLinkElement);
+        if (url) {
+          sources.push({ el, url });
+        }
       }
-    }
-    if (el.tagName.toLowerCase() === 'style') {
-      sources.push({ el, css: el.innerHTML });
-    }
-  });
+      if (el.tagName.toLowerCase() === 'style') {
+        sources.push({ el, css: el.innerHTML });
+      }
+    });
+
+  const elementsForInlines = excludeInlineStyles ? (elements ?? []) : undefined;
 
-  const inlines = fetchInlineStyles();
+  const inlines = fetchInlineStyles(elementsForInlines);
 
   return await fetchLinkedStylesheets([...sources, ...inlines]);
 }
diff --git a/src/polyfill.ts b/src/polyfill.ts
index abb08357..b5f92009 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -443,13 +443,35 @@ async function position(rules: AnchorPositions, useAnimationFrame = false) {
   }
 }
 
-export async function polyfill(animationFrame?: boolean) {
+function normalizePolyfillOptions(
+  useAnimationFrameOrOption: boolean | AnchorPositioningPolyfillOptions = {},
+) {
+  const options =
+    typeof useAnimationFrameOrOption === 'boolean'
+      ? { useAnimationFrame: useAnimationFrameOrOption }
+      : useAnimationFrameOrOption;
   const useAnimationFrame =
-    animationFrame === undefined
+    options.useAnimationFrame === undefined
       ? Boolean(window.UPDATE_ANCHOR_ON_ANIMATION_FRAME)
-      : animationFrame;
+      : options.useAnimationFrame;
+
+  if (!Array.isArray(options.elements)) {
+    options.elements = undefined;
+  }
+
+  return Object.assign(options, { useAnimationFrame });
+}
+
+// Support a boolean option for backwards compatibility.
+export async function polyfill(
+  useAnimationFrameOrOption?: boolean | AnchorPositioningPolyfillOptions,
+) {
+  const options = normalizePolyfillOptions(
+    useAnimationFrameOrOption ?? window.ANCHOR_POSITIONING_POLYFILL_OPTIONS,
+  );
+
   // fetch CSS from stylesheet and inline style
-  let styleData = await fetchCSS();
+  let styleData = await fetchCSS(options.elements, options.excludeInlineStyles);
 
   // pre parse CSS styles that we need to cascade
   const cascadeCausedChanges = await cascadeCSS(styleData);
@@ -464,7 +486,7 @@ export async function polyfill(animationFrame?: boolean) {
     await transformCSS(styleData, inlineStyles, true);
 
     // calculate position values
-    await position(rules, useAnimationFrame);
+    await position(rules, options.useAnimationFrame);
   }
 
   return rules;
diff --git a/tests/e2e/polyfill.test.ts b/tests/e2e/polyfill.test.ts
index 789176cf..1ecf7ce7 100644
--- a/tests/e2e/polyfill.test.ts
+++ b/tests/e2e/polyfill.test.ts
@@ -126,3 +126,146 @@ test('applies polyfill for `@position-fallback`', async ({ page }) => {
 
   await expect(target).toHaveCSS('width', '100px');
 });
+
+test('applies manual polyfill', async ({ page }) => {
+  await page.locator('#apply-polyfill-manually').click();
+  const anchorBox = (await page.locator('#my-anchor-manual').boundingBox())!;
+  const target1Box = (await page
+    .locator('#my-target-manual-style-el')
+    .boundingBox())!;
+  const target2Box = (await page
+    .locator('#my-target-manual-link-el')
+    .boundingBox())!;
+  const target3Box = (await page
+    .locator('#my-target-manual-inline-style')
+    .boundingBox())!;
+
+  expect(target1Box.x + target1Box.width).toBeCloseTo(anchorBox.x, 0);
+  expect(target1Box.y + target1Box.height).toBeCloseTo(anchorBox.y, 0);
+
+  expect(target2Box.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target2Box.y + target2Box.height).toBeCloseTo(anchorBox.y, 0);
+
+  expect(target3Box.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target3Box.y).toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+});
+
+test('applies manual polyfill for multiple elements separately', async ({
+  page,
+}) => {
+  const buttonContainer = page.locator('#anchor-manual-test-buttons');
+  await buttonContainer.evaluate((node: HTMLDivElement) => {
+    node.hidden = false;
+  });
+  await buttonContainer.waitFor({ state: 'visible' });
+
+  const prepareButton = page.locator('#prepare-manual-polyfill');
+  await prepareButton.click();
+
+  const anchorBox = (await page.locator('#my-anchor-manual').boundingBox())!;
+  const target1Box = (await page
+    .locator('#my-target-manual-style-el')
+    .boundingBox())!;
+  const target2Box = (await page
+    .locator('#my-target-manual-link-el')
+    .boundingBox())!;
+  const target3Box = (await page
+    .locator('#my-target-manual-inline-style')
+    .boundingBox())!;
+
+  expect(target1Box.x + target1Box.width).not.toBeCloseTo(anchorBox.x, 0);
+  expect(target1Box.y + target1Box.height).not.toBeCloseTo(anchorBox.y, 0);
+
+  expect(target2Box.x).not.toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target2Box.y + target2Box.height).not.toBeCloseTo(anchorBox.y, 0);
+
+  expect(target3Box.x).not.toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target3Box.y).not.toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+
+  const set1Button = page.locator('#apply-polyfill-manually-set1');
+  const set2Button = page.locator('#apply-polyfill-manually-set2');
+
+  await set1Button.click();
+
+  const newTarget1Box = (await page
+    .locator('#my-target-manual-style-el')
+    .boundingBox())!;
+
+  expect(newTarget1Box.x + newTarget1Box.width).toBeCloseTo(anchorBox.x, 0);
+  expect(newTarget1Box.y + newTarget1Box.height).toBeCloseTo(anchorBox.y, 0);
+
+  await set2Button.click();
+
+  const newTarget2Box = (await page
+    .locator('#my-target-manual-link-el')
+    .boundingBox())!;
+  const newTarget3Box = (await page
+    .locator('#my-target-manual-inline-style')
+    .boundingBox())!;
+
+  expect(newTarget2Box.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(newTarget2Box.y + newTarget2Box.height).toBeCloseTo(anchorBox.y, 0);
+
+  expect(newTarget3Box.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(newTarget3Box.y).toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+});
+
+test('applies manual polyfill with automatic inline style polyfill', async ({
+  page,
+}) => {
+  const buttonContainer = page.locator('#anchor-manual-test-buttons');
+  await buttonContainer.evaluate((node: HTMLDivElement) => {
+    node.hidden = false;
+  });
+  await buttonContainer.waitFor({ state: 'visible' });
+
+  const prepareButton = page.locator('#prepare-manual-polyfill');
+  await prepareButton.click();
+
+  const anchorBox = (await page.locator('#my-anchor-manual').boundingBox())!;
+  const target1Box = (await page
+    .locator('#my-target-manual-style-el')
+    .boundingBox())!;
+  const target2Box = (await page
+    .locator('#my-target-manual-link-el')
+    .boundingBox())!;
+  const target3Box = (await page
+    .locator('#my-target-manual-inline-style')
+    .boundingBox())!;
+
+  expect(target1Box.x + target1Box.width).not.toBeCloseTo(anchorBox.x, 0);
+  expect(target1Box.y + target1Box.height).not.toBeCloseTo(anchorBox.y, 0);
+
+  expect(target2Box.x).not.toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target2Box.y + target2Box.height).not.toBeCloseTo(anchorBox.y, 0);
+
+  expect(target3Box.x).not.toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(target3Box.y).not.toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+
+  const set3Button = page.locator('#apply-polyfill-manually-set3');
+
+  await set3Button.click();
+
+  const newTarget1Box = (await page
+    .locator('#my-target-manual-style-el')
+    .boundingBox())!;
+
+  const newTarget2Box = (await page
+    .locator('#my-target-manual-link-el')
+    .boundingBox())!;
+  const newTarget3Box = (await page
+    .locator('#my-target-manual-inline-style')
+    .boundingBox())!;
+
+  expect(newTarget1Box.x + newTarget1Box.width).toBeCloseTo(anchorBox.x, 0);
+  expect(newTarget1Box.y + newTarget1Box.height).toBeCloseTo(anchorBox.y, 0);
+
+  expect(newTarget2Box.x).not.toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(newTarget2Box.y + newTarget2Box.height).not.toBeCloseTo(
+    anchorBox.y,
+    0,
+  );
+
+  expect(newTarget3Box.x).toBeCloseTo(anchorBox.x + anchorBox.width, 0);
+  expect(newTarget3Box.y).toBeCloseTo(anchorBox.y + anchorBox.height, 0);
+});
diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
index 105df490..67e7d37e 100644
--- a/tests/unit/fetch.test.ts
+++ b/tests/unit/fetch.test.ts
@@ -97,3 +97,131 @@ describe('fetch inline styles', () => {
     );
   });
 });
+
+describe('fetch styles manually', () => {
+  let target5Css: string;
+  let target6Css: string;
+
+  beforeAll(() => {
+    document.head.innerHTML = `
+      <style id="el1">
+        .anchor { anchor-name: --anchor }
+      </style>
+      <style id="el2">
+        .target1 {
+          position: absolute;
+          right: anchor(--anchor left);
+          bottom: anchor(--anchor top);
+        }
+      </style>
+      <style>
+        .target2 {
+          position: absolute;
+          left: anchor(--anchor right);
+          bottom: anchor(--anchor top);
+        }
+      </style>
+      <link rel="stylesheet" href="/target5.css" id="el3" />
+      <link rel="stylesheet" href="/target6.css" />
+    `;
+    document.body.innerHTML = `
+      <div class="anchor">Anchor</div>
+      <div class="target1">Target 1</div>
+      <div class="target2">Target 2</div>
+      <div class="target3" id="el4" style="
+        position: absolute;
+        right: anchor(--anchor left);
+        top: anchor(--anchor bottom);
+      ">Target 3</div>
+      <div class="target4" style="
+        position: absolute;
+        left: anchor(--anchor right);
+        top: anchor(--anchor bottom);
+      ">Target 3</div>
+      <div class="target5" id="el5">Target 5</div>
+      <div class="target6">Target 6</div>
+    `;
+    target5Css = `
+      .target5 {
+        position: absolute;
+        left: anchor(--anchor center);
+        bottom: anchor(--anchor top);
+      }
+    `;
+    target6Css = `
+      .target6 {
+        position: absolute;
+        left: anchor(--anchor center);
+        top: anchor(--anchor bottom);
+      }
+    `;
+  });
+
+  afterAll(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+  });
+
+  it('fetches only inline styles if `elements` is empty', async () => {
+    const styleData = await fetchCSS([]);
+
+    expect(styleData).toHaveLength(2);
+  });
+
+  it('fetches nothing if `elements` is empty and exclusing inline styles', async () => {
+    const styleData = await fetchCSS([], true);
+
+    expect(styleData).toHaveLength(0);
+  });
+
+  it('fetches styles only from the given elements', async () => {
+    fetchMock.getOnce('end:target5.css', requestWithCSSType(target5Css));
+    fetchMock.getOnce('end:target6.css', requestWithCSSType(target6Css));
+
+    const el1 = document.getElementById('el1')!;
+    const el2 = document.getElementById('el2')!;
+    const el3 = document.getElementById('el3')!;
+    const el4 = document.getElementById('el4')!;
+    const el5 = document.getElementById('el5')!;
+
+    const styleData = await fetchCSS(
+      [
+        el1,
+        el2,
+        el3,
+        el4,
+        // should be ignored
+        el5,
+        // @ts-expect-error should be ignored
+        undefined,
+        // @ts-expect-error should be ignored
+        null,
+        // @ts-expect-error should be ignored
+        123,
+      ],
+      true,
+    );
+
+    expect(styleData).toHaveLength(4);
+
+    expect(styleData[0].el).toBe(el1);
+    expect(styleData[0].url).toBeUndefined();
+    expect(styleData[0].css).toContain('anchor-name: --anchor');
+
+    expect(styleData[1].el).toBe(el2);
+    expect(styleData[1].url).toBeUndefined();
+    expect(styleData[1].css).toContain('right: anchor(--anchor left);');
+    expect(styleData[1].css).toContain('bottom: anchor(--anchor top);');
+
+    expect(styleData[2].el).toBe(el3);
+    expect(styleData[2].url?.toString()).toBe(`${location.origin}/target5.css`);
+    expect(styleData[2].css).toContain('left: anchor(--anchor center);');
+    expect(styleData[2].css).toContain('bottom: anchor(--anchor top);');
+
+    expect(styleData[3].el).toBe(el4);
+    expect(styleData[3].url).toBeUndefined();
+    expect(styleData[3].css.trim()).toContain('[data-has-inline-styles=');
+    expect(styleData[3].css).toContain('right: anchor(--anchor left);');
+    expect(styleData[3].css).toContain('top: anchor(--anchor bottom);');
+  });
+});