Details #

The Details component is an alternative to the details element. By default it's lazy, and you can pass eager to render the children immediately like the base element.

Benefits of lazy children:

• children are transitioned in/out with an animation (TODO this may be doable with eager children, if so it would probably be the better default, and then the prop should be swapped to lazy)
• improved performance, can significantly improve UX in some cases

Tradeoffs:

• ctrl+f does not work to find text and auto-open the details
• you may desire some behavior caused by mounting the children

<Details>
  {#snippet summary()}summary content{/snippet}
  lazy children content
</Details>

<Details eager>
  {#snippet summary()}summary content{/snippet}
  eager children content
</Details>

<details>
  <summary>a summary element instead of a snippet</summary>
  the plain details
</details>