Missing Details

I've been working with the details element a lot lately. It's really handy for being able to show or hide information without JavaScript and its accessible? Sign me up.

May 12, 2022

When I started writing some JavaScript around the toggle event for a details element, I noticed the event was firing on page load, even when summary element hadn't been clicked or the open attribute had been changed. I thought I made a mistake and spent a bit of time debugging what could be doing that. Wrote some example code, tested it in different browsers and OSes, and the result was the same--the event fired at page load, no errors, no warnings.

Naturally, this took me to one of my favorite places, THE HTML SPECIFICATION, specifically the section on how browsers should handle changes to the open attribute:

Whenever the open attribute is added to or removed from a details element, the user agent must queue an element task [that ends with the user agent firing] an event named toggle at the details element.

Yeah, that makes total sense. But what about page load? It's not mentioned in the spec, at all, from what I can tell.

This took me to GitHub, and let me tell you: if you're searching GitHub issues for the details element, you will get way more noise than signal in your results. Turns out the word "details" occurs in a lot of discussions. Who would've thought?

At this point, I started to write this post (from a very different, more despair-ridden perspective) but it was late on a Friday, and I'm glad I gave up to do something else because today I learned that I was not imagining things! I'm not the first person to notice that the spec does not mention this behavior:

That doesn't say what happens when the parser sets the attribute

YEAH! It doesn't!

[taps fingers on desk]

So, like, why though? That's the part I'm still missing, and the conversation I can't find. And I'm not sure I understand the reasoning behind toggle firing when the author's intent was for the element to be open, thus nothing was actually toggled. My best guess is that, because the element is a disclosure element, and the content of the element is hidden by default, so adding open changes the default state of the element.

Meanwhile, a text input can have a prefilled value, a radio or checkbox can have the checked attribute, an option can have a selected attribute, and none of these will fire the change event at page load, even though each of those element's assumed default state is to be blank, unchecked, or unselected respectively.

I would love to learn more about the decision here, because in my humblest of opinions, the parser firing the toggle event for any details[open] element feels like a fairly big assumption on how we use the element that contradicts how other elements work. Moreover, while looking through spec issues, I saw that some want to have toggle fire on other elements. So will this behavior carry over? And if so, why?