No video
How to build a show-hide component with JavaScript
Рет қаралды 687
2 ай бұрынSource code: gist.github.co...
W3C ARIA Authoring Guidelines: www.w3.org/WAI...
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.
@KeshavPanchal Күн бұрын
Please keep making content on web components!🎉
@hefalump56 2 ай бұрын
Thanks Chris, I look forward to more of this content. FYI, I found you from Kevin Powell's Front End Friends, CSS channel on KZfaq.
@gomakethings 2 ай бұрын
Glad to have you here!
@terhuneb 2 ай бұрын
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 2 ай бұрын
You're welcome, and glad that was useful. That gives me an idea for another video.
@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.
@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!
@victorh8863 2 ай бұрын
You are my favorite channel for Javascript related tutorials!
@gomakethings 2 ай бұрын
Thank you so much!
@davidluhr 2 ай бұрын
The button-up is back!
@gomakethings 2 ай бұрын
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 2 ай бұрын
Eye-opening.
@IainSimmons 2 ай бұрын
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 2 ай бұрын
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 2 ай бұрын
@@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!
@krisvanderven2367 2 ай бұрын
Clear explanation!
@gomakethings 2 ай бұрын
Thanks!
@k16e 2 ай бұрын
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 2 ай бұрын
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/
@davidluhr 2 ай бұрын
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 2 ай бұрын
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 2 ай бұрын
@@gomakethings I agree it's not likely, so it probably doesn't matter. Good idea to just hyphenate a non-data attribute.
@___d3p1 Ай бұрын
I love this content!!!!
@gomakethings Ай бұрын
Delighted to hear that!
@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.
Go Make Things
Рет қаралды 1,2 М.