How to build a show-hide component with JavaScript

Source code: gist.github.com/cferdinandi/8...
W3C ARIA Authoring Guidelines: www.w3.org/WAI/ARIA/apg/patte...
Get coaching, courses, and coding resources at leanwebclub.com.
Hate the complexity of modern front‑end web development? I teach people a simpler, faster way to build for the web. Get free Daily Developer Tips at gomakethings.com.

[@victorh8863]

You are my favorite channel for Javascript related tutorials!

[@gomakethings]

Thank you so much!

[@terhuneb]

I have only used CSS display: none; I didn't even know there was a hidden attribute for html! Some good nuggets in here. Thanks for your continued effort in making JS accessible to everyone.

[@gomakethings]

You're welcome, and glad that was useful. That gives me an idea for another video.

[@hefalump56]

Thanks Chris, I look forward to more of this content. FYI, I found you from Kevin Powell's Front End Friends, CSS channel on KZbin.

[@gomakethings]

Glad to have you here!

[@tombranson9341]

I love web components and use them in our applications and subscribe to your newsletter. You showed us this awesome feature and I recently refactored a couple of my components to use this handleEvent callback function in a dialog web component in our company's production application, thanks!!

[@gomakethings]

Delighted to hear that!

[@tithos]

I know you are The vanilla JS guy, but you teach me more about ARIA that anyone. THANKS

[@gomakethings]

I'm both delighted and saddened to hear that! Glad you appreciate, but a huge bummer that most tech educators never cover it.

[@davidluhr]

The button-up is back!

[@gomakethings]

LOL! I only didn't have it on last time because it was hot AF in my office. You may see me in a polo as we move further into summer though.

[@k16e]

Eye-opening.

[@krisvanderven2367]

Clear explanation!

[@gomakethings]

Thanks!

[@IainSimmons]

Great video! I'm glad to see more people and videos showing simpler use cases of web components. No need to go crazy with the shadow DOM, which i find a bit of a turn-off. The handleEvent thing is an awesome trick and one I've never seen before. I assume if you attached multiple event listeners with different event types that you'd just have to check the type in that function?

[@gomakethings]

Great question, and yes. I have an article on a few techniques for doing that, including one that makes it comically easy: gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/#handling-multiple-event-types

[@IainSimmons]

@@gomakethings that's a fantastic article, and honestly, this small thing, combined with this video, is enough to make me interested in writing web components now, when I before I was firmly in the "it's easier to use a frontend framework" camp. Thanks again for opening my eyes to the possibilities built into the platform! I love that this is something that's just a part of addEventListener, not a web component specific feature.

[@gomakethings]

@@IainSimmons I'm delighted to hear that!! Please reach out if you have any questions or get stuck!

[@___d3p1]

I love this content!!!!

[@gomakethings]

Delighted to hear that!

[@davidluhr]

HTML web components and progressive enhancement work so well together. I know it's valid, but is there any future-proofing risk of using non-standard attribute names? I typically stick with `data-` attributes, such as `data-component="trigger"` for this purpose. I think of it similar to how custom elements require a hyphen to avoid naming collision with future native elements. Interested in your thoughts!

[@gomakethings]

That's a good point! A hyphened name like `sh-trigger` would do it. The risk feels low, but not 0, of a naming collision though.

[@davidluhr]

@@gomakethings I agree it's not likely, so it probably doesn't matter. Good idea to just hyphenate a non-data attribute.

[@k16e]

Would any button in a form submit the form on click despite not having an explicit submit handler called on it? Or that the submit button itself is an input with type = submit? Else if feels like having to e.preventDefault() is redundant...

[@gomakethings]

Correct. Any button inside a form gets an implicit `type="submit"` on it. You could alternatively manually add type="button" to the button element to prevent that behavior: gomakethings.com/how-to-prevent-buttons-from-causing-a-form-to-submit-with-html/

[@jonathanoden6854]

Hello, thank you very much for the work you are doing in sharing good practices on how the web could be done! Web components didn't clicked for me until I saw your daily tips. I had this bad feeling using shadow dom and kind of full javascript components. Now, with 'enhanced html elements' it feels really nice and deeply connected to html and css. I see here you are using attributes without 'data-' prefix, is there a reason for that? Again, thanks a lot!

[@gomakethings]

They're invalid, and I should probably stop doing it. In my mind, if I'm creating a custom element, I like to use custom attributes with it. An HTML validator will complain about them, but CSS and JavaScript will work with them just fine. For safety, I could also add a dash to the names to ensure no conflicts with future attribute names. I lean heavily on attributes in my web components, and having to write data-* constantly is fatiguing, IMO.