fyi: [hidden] is a lie

hidden is a Boolean attribute often used to hide elements, since browsers will (theoretically) not show elements with hidden set, like this:

      
  <div hidden>I am not displayed</div>

This is unfortunately a lie: the hidden rule is a User Agent style, which means it's less specific than a moderate sneeze [ref]. This means that your favourite display style will override it:

      
  <style>
    div { display: block; }
  </style>
  <div hidden>
      lol guess who's not hidden anymore
      hint: it's this thing
  </div>

The solution is tragic and it's to either not use hidden (because it's a lie), or to pepper your apps with

      
  [hidden] { display: none !important}

and they both suck, so have fun!