Implement the box generation keywords from CSS Display Level 3
When using layout modes like flexbox and grid, there is a conflict between the desire to keep the DOM tree relatively flat, to avoid complex, unperformant, highly-nested layouts, and grouping elements in a way that makes sense semantically and allows easy manipulation via data-binding frameworks like Angular.
This conflict can be solved by supporting the "display: contents" box-generation mode from CSS Display Module Level 3. This allows elements to be configured to generate no box of their own, only those of their children. In this way, complex, nested DOM structures can generate much simpler box trees.
Gunnar Bittersmann commented
An example where `display: contents` is needed: https://codepen.io/gunnarbittersmann/pen/adEzJe
Having a possibility to hide an element from being a container, can be used in many use cases. Thumbs up.
Grid without display:contents is severely limited and many layouts can only be achieved by breaking good semantic structure or massively increasing complexity. Here's a very simple example using an unordered and definition list: https://codepen.io/aamabbutt/pen/jwgPvm
Bryan Robinson commented
Display: contents is going to be extremely important for keeping our semantics in place once more developers and designers are using layout schemes involving Grid. Without contents, I envision a future where there are loads of <li>s or <div>s with no semantic structure just to pull off a layout, even if things like aside/main/ul should be wrapping things to make the code more semantic
Besides being useful for frameworks, this would make life much easier when working with a CMS.
Ilya Streltsyn commented
display:contents has been supported unprefixed in Firefox and is currently in development in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=657748). It is also very useful in implementing slots feature from Shadow DOM v.1 spec. And it's very useful for placing elements from different containers into the common grid using CSS Grid Layout (it's already possible in Firefox Nightly/Alpha and likely will soon be possible in Chrome). Is implementing it so hard?
I deeply agree that display:content will be extremely useful, especially in conjunction with modern layout schemes like Flexbox or Grid layout that make the placement of the element virtually independent from source order but work only with direct children of the container. With display:contents, we would be able to use these layout models for nearly any markup, without having to trade its semantic for purely presentational needs. Moreover, it has been supported by Firefox for about a year or more, so it shouldn't be too difficuilt to implement it. And when there are two shipped implementations, the W3C could finalize the spec and other vendors will eventually have to implement it.