How to build a show-hide component with JavaScript
Vložit
- čas přidán 10. 06. 2024
- 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.
You are my favorite channel for Javascript related tutorials!
Thank you so much!
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.
You're welcome, and glad that was useful. That gives me an idea for another video.
Thanks Chris, I look forward to more of this content. FYI, I found you from Kevin Powell's Front End Friends, CSS channel on CZcams.
Glad to have you here!
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!!
Delighted to hear that!
I know you are The vanilla JS guy, but you teach me more about ARIA that anyone. THANKS
I'm both delighted and saddened to hear that! Glad you appreciate, but a huge bummer that most tech educators never cover it.
The button-up is back!
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.
Eye-opening.
Clear explanation!
Thanks!
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?
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
@@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.
@@IainSimmons I'm delighted to hear that!! Please reach out if you have any questions or get stuck!
I love this content!!!!
Delighted to hear that!
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!
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.
@@gomakethings I agree it's not likely, so it probably doesn't matter. Good idea to just hyphenate a non-data attribute.
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...
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/
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!
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.