Details on <details>

These are notes from my talk Details on <details> at Brooklyn JS on 2018/07/19. I had way more prepared than could fit in the slides, so here's all the details on <details>.

This document was previously in a gist.

Spec

• HTML Living Standard
• MDN

Browser support

• Can I use
• Accessible polyfill for Edge/IE – javan/details-element-polyfill

CSS helpers

• Overlay utility from primer/primer
• Reset utility from primer/primer
  • How to style/reset <summary> cross browsers?
  • Spec list-style: disclosure-closed inside
  • Chrome issue tracker
  • Firefox issue tracker (implemented)
  • Safari issue tracker

Compatibility issues

• Safari bug with <details> when used with rem (fixed)
• Safari bug with <summary> and display: flex
• Chrome bug where <summary> triangle marker color doesn't update as CSS is applied (fixed)

GitHub's <details> dependent Custom Elements

• <details-dialog>
• <details-menu>

Spec and background discussions

• Should interactive elements inside of <summary> be banned?
• Shouldn't/Why doesn't toggle event bubble?
• Should <summary> be unselectable?
• How it went from <legend> to <dt/dd> to <summary>
• That time <details> almost got removed
• Why semantic elements and built-in accessibility are important
• Seaching inside of <details> with beforematch event