Na verdade ele não elimina o CSS do container, ele elimina o próprio container
do layout, deixando apenas os elementos filhos.
A função da propriedade é alterar visualmente um ou mais elementos mantendo a semântica do HTML, geralmente quando a marcação (tag) do elemento-pai não interessa naquele contexto, fazendo com que os elementos filhos se tornem filhos diretos do avô (apenas visualmente):
<div> ← Avô
<div> ← Pai
<div></div> ← Neto
</div>
</div>
Ao adicionar a propriedade na div-pai, o a div-neto se torna visualmente uma "div-pai" (filha direta da div-avô), mas repito, apenas visualmente no layout. No DOM, a div-pai continua sendo a div-pai. Seria como se você tivesse comentado a tag (SERIA, mas a tag continua ativa no DOM):
<div> ← Avô
<!-- <div style="display: contents"> ← Pai -->
<div></div> ← Neto
<!-- </div> -->
</div>
A indicação de uso vai depender muito do layout que se deseja construir e da semântica que se deseja manter.
Um exemplo hipotético seria: eu quero construir um menu horizontal sendo que os dois primeiros links sejam duas <li>
, mas, por questões de semântica, essas li
's devem estar dentro de uma tag <ul>
. O display: contents
torna isso possível "eliminando" a tag ul
(apenas visualmente) fazendo com que as li
's se comportem como parte do grid do menu assim como os outros links <a>
, mas a estrutura da lista fica intacta no 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>
Doutra sorte isso não seria possível, ou seja, não seria possível utilizar uma lista <ul>
para esse propósito. Veja como ficaria o menu sem o display: contents
na ul
:

Veja que as li
's não conseguem se integrar ao grid do menu por serem filhas do elemento ul
, que por sua vez é filho do elemento .content
. O display: contents
torna, apenas visualmente na tela, as li
's filhas diretas do .content
, tornando-as parte do grid do menu juntamente com os outros dois elementos <a>
.
Um artigo de referência que aborda o assunto de forma bem objetiva (em inglês):