One of the questions that always seems to arise whenever the topic of element queries or container queries is mentioned goes something like this:

If a CSS rule contained by an element query were to affect the size or shape of its containing element - it might conflict with the validity of the responsive condition on that element that sets the style that conflicts. Could this sort of circularity or self-reference pose a problem to implementing element queries or container queries natively in browsers?

Some people believe that the path forward for element/container queries would be to try to limit the scope of their power, to make them powerless to affect their containing element, etc.

But I think that another approach can be found. In this video I illustrate that CSS already suffers from circularity and self-reference problems, but since that hasn't stopped people from building websites today, having powerful element queries with the possibility of circularity and self-reference is exactly the kind of element queries we need in CSS.

Watch as I demonstrate how CSS currently handles circularity, and why the same approach for element queries could be used to bypass this issue entirely:

For more information about how I propose element queries should handle this situation, read the sections on self-referential and circular queries in the CSS Element Queries spec.