Is your feature request related to how popovers work in general?

No.

Is your feature request related to how this polyfill works? Please describe.

When using *.adoptedStyleSheets or *.style.setProperty() to add CSS Anchor Positioning declarations, in unsupported browsers, these declarations will be ignored/removed since they are not recognized CSS properties and values. As a result, this polyfill won't work because those declarations aren't there in the first place.

The current work around is to use *.setAttribute('style', '...') or creating a style element with the Anchor Positioning declarations as its text content. But this work around could trigger content security policy issues.

Describe the solution you'd like

Unclear.

Additional context

We are currently building some custom elements (using Popover API) that would benefit from CSS Anchor Positioning, so we are investigating if using the polyfill would help in unsupported browsers. We understand the cross-root referencing issue, so in the custom element, we creates a new CSSStyleSheet() object and inject that into document.adoptedStyleSheets, e.g.

#trigger-123 {
  anchor-name: --trigger-123;
}
#popover-123 {
  left: anchor(--trigger-123, left);
  top: anchor(--trigger-123, bottom);
}

But in unsupported browsers, this style sheet would just be:

#trigger-123 {}
#popover-123 {}

We are wondering if there is a solution for this use case, or rather this is out of the scope of this polyfill.