Web Components

Enhancing the HTML Details Element

Web Components

Check out a free preview of the full Web Components course

The "Enhancing the HTML Details Element" Lesson is part of the full, Web Components course featured in this preview video. Here's what you'd learn in this lesson:

Dave demonstrates the <details-utils> web component which is a wrapper for the details HTML element to add accessibility features, animations, and force open/close events.


Transcript from the "Enhancing the HTML Details Element" Lesson

>> Another one came from Zach Leatherman who works on 11ty, details-utils. If you've ever used details element, who's used the details element? It's relatively new. Okay, yeah, so if you've ever used details element, it's maybe the coolest new interactive element in HTML. It's like a free drop-down disclosure.

You could do it on a forum like you want to get birthday reminders, and you click it and you drop down, show them the birthday form or whatever. It's very cool. But there's a few problems, or just it lacks some features, or maybe it's more apt to say I want to use this everywhere.

I wanna use this in navigations drop-down menus. I wanna use it everywhere, but there's a few features. Adrian Roselli, yeah, this post sort of shook my brain, but Adrian Roselli is a accessibility expert. And he had this post called Details/Summary Are Not [insert control here]. And in the post, he says, they are not an accordion.

And I was like, wait, what? [LAUGH] Why is it not an accordion? And I wrote a whole blog post on that. It's not a tab set. And I'm like, well, I may not guess it. It's not menu navigation. Wait a minute, what? And he goes on. He kinda points out, hey, it's kinda just a bad pattern just from accessibility.

But purely, they lack the ability to hit Esc on close, right? So if you have a details element and I hit Esc, nothing happens. But if we go to our details-utils, I can wrap it in the details-utils here. And then I can add some behaviors like close to click outside, right?

So if I click outside, I have to get my browser real big. Let me go embiggen this again. So if I do this and I click outside, do I have to go bigger? No, let's zoom out, there, I'm bigger, I'm big enough. [LAUGH] I finally made it. So you can close to click outside if it's over 48.

And then another feature has close on Esc. So if I open my demo and I hit Esc, it closes. Tada, I now, according to Adrian's post, am safe to use it as a dropdown menu in my main navigation or something like that. That's pretty cool. Zero lines of JavaScript for me.

Zach wrote some, but it's probably very minimal JavaScript. Animation, I don't know if you've ever tried to animate the details element, but it's not fun cuz you have to measure the height and then do an animation between a known height and an unknown height. The default details kinda looks like, all right, let's see if I can save this.

And the default details kinda looks like this, on, off, on, off. Not very cool, doesn't pass to your designer sensibility. So you put animate on there, and guess what? Now, we are cool, and our boss will give us a raise because we are wowing with surprise and delight.

All by just wrapping a details element in sort of the utility element outside of it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now