[BUG] Polyfill not working in React

[erikblomqvist-huma]

Describe the bug
When trying to use the polyfill in a React app, the variable names (CSS properties) used for anchoring and positioning the target gets rendered in the DOM (added to the anchor and target elements), but the actual values are incorrect, and the references that are supposed to be added to html element aren't rendered, causing the polyfill to not work as intended.

I've also tried calling the polyfill() like this in App.js:

const anchorRef = useRef();
const targetRef = useRef();

useEffect(() => {
  if(!anchorRef.current || !targetRef.current) {
    return null
  }

  polyfill({ elements: [anchorRef.current, targetRef.current] })
}, [anchorRef, targetRef])

… but that doesn't trigger any of the polyfills.

To Reproduce
CodeSandbox

Screenshots

Browsers tested on

• macOS Sequoia 15.0.1
  • Safari 18.0.1
  • Firefox 133.0.3

[jamesnw]

Thanks for reporting! It looks like you were almost there with useEffect!

A few things-

• When calling the polyfill in index.js, the elements were not yet in the DOM, so the polyfill couldn't find them. Dynamic elements are not yet supported, see applying the polyfill to dynamic elements #91
• In your useEffect example, you passed in the target and anchor as elements. This would work if you either also pass in the <style> or <link> element that contain your anchor styles, use inline styles, or omit the elements argument.
• In the screenshot of dev tools, it shows the polyfill working as expected. The polyfill doesn't make the browser understand the style rules, but instead adds custom properties in order to implement anchor positioning.

Here's the code for app.js that worked-

import "./styles.css";
import polyfill from "@oddbird/css-anchor-positioning/fn";
import { useEffect, useRef } from "react";

export default function App() {
  const anchorRef = useRef(null);
  const targetRef = useRef(null);
  useEffect(() => {
    if (!anchorRef.current || !targetRef.current) {
      return null;
    }

    polyfill();
  }, [anchorRef, targetRef]);

  return (
    <div className="App">
      <div className="anchor" ref={anchorRef}>
        Anchor
      </div>
      <div className="target" ref={targetRef}>
        Target
      </div>
    </div>
  );
}

And a working example- https://codesandbox.io/p/sandbox/css-anchor-positioning-polyfill-forked-9lcpw5

Hope that helps!