<details>

📗 <details> & Shadow DOM & Inheritance
💾 replit

anything within <details> will have box-sizing: content-box, not border-box❗️ 📗 <details> & Shadow DOM & Inheritance

/* ⭐️ universal box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 1em;
}

.fixed-width {
  width: 400px;
  padding: 1em;
}

summary {
  background-color: tomato;
}

p {
  background-color: lawngreen;
  margin: 0;
}

.reference {
  margin-top: 1em;
  background-color: deepskyblue;
}

<div class="container">
  
  <!-- ⭐️ built-in web component -->
  <details>
  
    <!--   light DOM   -->
    
    <!--   ⭐️ (built-in) named slot   -->
    <summary class="fixed-width">
      &lt;details&gt; (built-in component)
    </summary>
    
    <!--   ⭐️ slotted nodes (inserted into default slot)   -->
    <p class="fixed-width">
      `box-sizing` property is not automatically inherited to 
      slotted contents, you have to explicitly assign it.
    </p>
  </details>
  
  <!--  for reference only  -->
  <div class="fixed-width reference">
    width: 400px; padding: 1em;
  </div>
  
</div>

PreviousBuilt-in Components Nextweb component examples

Last updated 4 years ago

Was this helpful?