What is the purpose and how to use the "display: Contents" of the CSS?

Question

I recently saw that there is a new kind of display in the CSS the display: contents, but I didn’t quite understand the intention of using it? https://developer.mozilla.org/en-US/docs/Web/CSS/display

It seems to be just to remove CSS from container... But that’s all he’s good for? It’s to remove the CSS from the parent?

Doubts

• After all what is the indication of use for this display?
• And if there are any contraindications what would be?

Example code:

.content {
  border: 2px solid #999;
  background-color: #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 400px;
/*   display: contents; */
}

.inner {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
}

<div class="content">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eligendi quia accusantium, placeat, blanditiis consequuntur voluptatum iusto amet voluptate cupiditate architecto porro sapiente, illum eaque commodi tempore facilis? Sunt, corrupti?</p>
  </div>
</div>

Answer 1

It doesn’t actually eliminate the container’s CSS, it eliminates the container itself layout, leaving only child elements.

The function of the property is to visually change one or more elements while maintaining the semantics of HTML, usually when the parent element’s markup (tag) does not matter in that context, causing the child elements to become the direct children of the grandfather (only visually):

<div> ← Avô
   <div> ← Pai
      <div></div> ← Neto
   </div>
</div>

When adding property to div-father, o a div-neto becomes visually a "div-father" (direct daughter of div-grandfather), but I repeat, only visually in the layout. In the DOM, the div-father remains the div-father. It would be as if you had commented the tag (WOULD, but the tag remains active in the DOM):

<div> ← Avô
   <!-- <div style="display: contents"> ← Pai -->
      <div></div> ← Neto
   <!-- </div> -->
</div>

The indication of use will depend a lot on the layout you want to build and the semantics you want to keep.

A hypothetical example would be: I want to build a horizontal menu where the first two links are two <li>, but, for semantic reasons, these li's must be within a tag <ul>. The display: contents makes it possible to "eliminate" the tag ul (only visually) causing the li's behave as part of the menu grid as well as other links <a>, but the structure of the list remains intact in the DOM:

.content{
   display: flex;
   background-color: black;
}

.content > *, .content ul li, .content ul li a{
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}

.content > *{
   height: 50px;
   background-color: lightgreen;
   margin: 2px;
}

.content ul li{
   background-color: yellow;
   margin: 2px;
}

.content ul li a{
   width: 100%;
   height: 100%;
}

.content ul{ display: contents; }

<div class="content">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
   </ul>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
</div>

Otherwise this would not be possible, that is, it would not be possible to use a list <ul> for this purpose. See how the menu would look without the display: contents in ul:

See that the li's cannot integrate into the menu grid because they are children of the element ul, who in turn is the child of the element .content. The display: contents makes, only visually on the screen, the li'the direct daughters of .content, making them part of the menu grid along with the other two elements <a>.

A reference article that addresses the subject in a very objective way (in English):

• https://codeburst.io/display-contents-8c9226bd4602

Answer 2

A very interesting use case that can be applied with the Vue.js is when you are building an item Checklist and you want the content of li be a slot (for the content to be customizable) and you want this content to be clickable so that you activate/deactivate the checkbox li correspondent. Thus, its component would look like something like this:

<ul>
  <li v-for="item in listItems" :key="item.id">
    <div class="item">
      <input type="checkbox" @change="toggleSelection(item)" />
      <div class="wrapper" @click="toggleSelection(item)">
        <slot :item="item"></slot>
      </div>
    </div>
  </li>
</ul>

If you don’t create a css setting the div wrapper to be display: contents, the content that will be rendered in the slot may have its layout broken because the wrapper class is a div, which has several attributes pre-set by the browsers. When defining display: contents for the div wrapper its css will be "ignored" causing and li be rendered as if he were a direct child of div.item. That way we can use the div.wrapper just as a way to define a click event for your content.