Some use cases for display: contents | Mayank

There have long been issues (mainly due to browser regressions) with using display: contents; in the wild, but there are still some potential use-cases for effectively removing non-semantic elements from impacting layout calculations and styling.

On the inherent risks of using display: contents:

We have reached a point where we cannot trust that display: contents will ever be safe to use on semantically important elements (like <button>) because it can completely destroy semantics and keyboard navigation.

On rethinking why and when display: contents is useful:

Rather than something you would use for “preserving semantics”, it’s something you should put on a generic wrapper. As long as the user won’t miss the HTML element not being there, display: contents is fair game.On donut-scoping styles so that internal slot components can be made ignorant to the parent containers styles using @scope: quote.If we ever get [CSS `@scope`](https://drafts.csswg.org/css-c...), we’ll be able to slot `the-slot` into the lower boundary, making it breeze to create [donuts](http://www.stubbornella.org/co...) without hashing any strings