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
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:
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.
input can have a prefilled
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?
To be clear, I write this out of genuine curiosity, not in a tantrum-y kind of way, because it's entirely possible there's a cross-site scripting or accessibility or some other kind of issue at play.