Add CSS `:has()` selector performance tips

[jryans]

Proposal

I recently learned from Firefox developers that certain forms of CSS :has() selectors can have vastly different performance characteristics when I reported a Firefox bug.

They shared the following tips:

anchoring :has() to an element (or to all elements) slow all DOM mutations inside that subtree (more the more complex the selector inside :has() is). So stuff like body:has() or :root:has() or *:has() are just a recipe for bad performance

1. :has(...) with an under-constrained compound may trigger many subtree-traversals: e.g. With :has(.foo), every DOM mutation will cause subtree traversals to see if that element does have .foo in the subtree.
2. :has(...) with an under-constrained inner selector compound may trigger many ancestor-traversals: e.g. With .ancestor:has(.foo > *), any DOM mutation will cause ancestor traversals to see if there's a :has() anchor to be invalidated. i.e. We need to check if the mutated DOM element has a .foo parent, and if we do, need to check for .ancestor to restyle.
3. Any occurrence of above can affect invalidation performance of otherwise well-constrained :has() selectors.

I would like to add this somewhere on MDN so these performance implications can become more widely known, but I wasn't sure where to put it.

Potential pages that occurred to me include:

• :has()
• CSS performance optimization

I wasn't sure if the :has() page itself was okay or not, as it might be required to match a very specific format like other CSS pages.

Browser support

No response

Tasks

• [ ]

Dependencies

• [ ]

Additional information

No response

Are you willing to support this work?

Yes, I can help write content once the contect place for it to live is decided.

[dipikabh]

This seems like a great idea, @jryans – appreciate you taking the initiative to propose a doc update based on the issue you experienced. It'll definitely be useful info for other developers. Thanks for checking with the team.

Both those pages seem like a good place to add a caution about what to watch out for when using :has() to avoid jank.

Apologies for the delay in getting to this issue. Would you still be available to do this work?

[jryans]

I should be able to give it a try. I guess I would assemble a PR for the content repo and wait for the MDN team to review it?

[dipikabh]

I should be able to give it a try. I guess I would assemble a PR for the content repo and wait for the MDN team to review it?

Yes, that's correct

[dipikabh]

Hi @jryans, this is a gentle nudge to check when you'd be able to work on this. Thanks!

[jryans]

Ah, just overwhelmed with other tasks at the moment. It may take me a bit to get around to it, so if anyone else has time before me, feel free to do so.

[dipikabh]

Totally understandable, appreciate you letting us know your availability, @jryans.

I can open up this task to the community to see if case anyone else might interested in taking it up. I imagine it could take a while for someone to pick it up and submit a PR. Please feel free to check back in whenever you have a moment.