but I feel it misses the connection that CSS Contain Level 3 is attempting to solve

Why isn't the existing ResizeObserver (as-is) good enough to listen for resize events on containers?

The CSS Working Group just discussed Similar to window.matchMedia(), Container Queries should have a similar method, and agreed to the following:

• RESOLVED: Add a matchContainer method as proposed in issue. Keep issue open to decide if need new observer or if we can reuse the existing

Is there anything new about this? We created a Designer with CSS parsing support (https://github.com/node-projects/web-component-designer) where we would need the "matchContainer" API to find the mathcing container queries

Wouldn't just checking a container element's offsetWidth when the window resizes be functionally the same as container query?

Wouldn't just checking a container element's offsetWidth when the window resizes be functionally the same as container query?

no? container queries could not only check for a size....

I expected this to have already been implemented, such a shame.

Just wanted to add that I ran into a use case where I wanted to be able to do;

window.matchContainer('(aspect-ratio < 16 / 9)')

Would have loved to be able to do this instead of writing some custom ResizeObserver which could potentially lead to performance issues if not managed mindful of re-paints for calculating/retrieving values.

No movement on this yet? No offense but do we have to wait another 10 years for something as basic as this again?

Some experimenting with learning about container-query changes via JS

• MutationObserver
  • Not possible, CSS cannot cause mutations to be observed; Thought perhaps pseudo-elements might work.. they don't.
• IntersectionObserver
  • Viable perhaps by toggling display: none on a "dummy" element. Limitations: If the container is outside the viewport
  • Example: https://codepen.io/robrez/pen/jOROErL
• ResizeObserver
  • Viable by toggling any css property. I'm unsure if the CSS engine will always run prior to the resizeObserver callback
  • Example: https://codepen.io/robrez/pen/yLrLyKE
  • Note that many would just use the ResizeObserver w/o any interaction w/ an underlying container query css policy... but the point of this thread is to have something similar to mediaMatch. The things you can do in CSS might be tricky to otherwise detect in JS
  • Note also that Element.matches seems like a reasonable instictive "let me try this"... but it will not tolerate any container query

Browser Bugs:

https://issues.chromium.org/issues/40887402
https://bugzilla.mozilla.org/show_bug.cgi?id=1897594
https://bugs.webkit.org/show_bug.cgi?id=274347

Also stated here: https://www.w3.org/TR/css-contain-3/#the-csscontainerrule-interface

I just ran into a case where I'd like to watch changes to a css variable using container style queries:

const match = document.body.matchContainer( 'style( --theme: dark )' );
match.addEventListener( () => { /* .... */ } );

It would be good to get clarification on if this is intended to be in HTMLElement or Element? I would imagine Element so it works with SVG and MathML?

Edit: the spec note itself says Elements but this issue and some of the browser issues say HTMLElement

For sure it needs to be Element. Every Node wich is styleable via CSS and respects ContainerQueries should have this method.