TL;DR

Add a stable attribute like hidden to the hidden element to make the :has() rule easier to write and less likely to break.

Guidance

• Consider adding a CSS rule that targets elements with display: none to exclude them from the :has() rule, despite the potential for future breakage.
• Next.js could potentially add a stable attribute like hidden to the hidden element, making it easier to write reliable :has() rules.
• Verify that any workaround or solution does not introduce unintended side effects or break existing functionality.
• Evaluate the trade-offs between using a potentially fragile CSS workaround versus advocating for a change in Next.js to support a more robust solution.

Example

No specific code example is provided, as the issue revolves around the interaction between CSS rules and Next.js behavior, rather than a specific code snippet that can be modified.

Notes

The issue highlights a limitation in how :has() rules interact with elements hidden using display: none, which is not a bug per se but rather a consequence of how these technologies work together. Any solution will need to balance between workarounds that might have future compatibility issues and advocating for changes in the underlying frameworks.

Recommendation

Apply workaround: Adding a stable attribute like hidden is not currently an option without changes to Next.js, so using a CSS rule that skips elements with display: none might be the most immediate, albeit imperfect, solution.