Trylle vekk elementer fra DOM treet med display: content

  • UI
  • HTML
  • Web

Nyttig når man ønsker å wrappe andre elementer i en overordnet DOM element, men ikke ønsker at det skal påvirke styling.

<div style="display: flex;">
  <div style="display: contents;">
    <span>en</div>
    <span>to</div>
    <span>tre</div>
  </div>
</div>
Her blir span elementene brukt som flex items.

I react så bruker man heller ofte Fragment, brukt via <>...</>, men det er ikke alltid det er mulig.

  1. Man ønsker å injecte rå html med dangerouslySetInnerHTML
  2. Man må basere seg på html som allerede eksisterer i DOM’en
  3. Man bruker et komponent som man ikke får endret strukturen på

Referanser