Support `@container anchored(fallback: ...)` queries

[jpzwarte]

Since the polyfill already has everything wired up related to CSS Anchor Positioning, it would be "relatively easy" to add support for the anchored container queries to it?

That is part of v2 of the spec: https://www.w3.org/TR/css-anchor-position-2/#anchored-container-queries

Are there reasons why it's a bad idea to do it in this polyfill?

Something like

if (!CSS.supports('anchor-name: --a')) {
  await polyfill();                          // covers queries as part of its work
} else if (!CSS.supports('container-type', 'anchored')) {
  await polyfillAnchoredContainerQueries();  // Chromium 125–142
}

[jamesnw]

I haven't looked too in depth at this yet, but my thought is it would be straightforward to support this when polyfilling all of anchor positioning. It will likely be more difficult in the scenario where the browser supports anchor positioning but not anchored container queries. I think it would likely need a completely separate solution.

This also tiptoes into potentially problematic territory- we've so far avoided doing partial polyfills, which would greatly increase the complexity.

My initial thought is we'd start by implementing it as part of the full polyfill, and if we find it can be extracted, perhaps expose it as a partial polyfill.

A polyfill solving a related question is https://github.com/teetotum/match-container, but that only works if anchored container queries are implemented.

[jpzwarte]

I agree that doing a partial polyfill is scary. What i've done now is to set an --_anchored CSS custom property on the host element of my web component and use style container queries. That works, except when the position changes while the popover is open. Then the scroll and resize event handlers on the window aren't triggered signaling it needs to recalculate the position. But i wonder if that will ever happen in real life.

I haven't given it a lot of thought, but perhaps such as "light" solution could be used in the polyfill as well?