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!!
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.
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.
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!
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.
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/
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 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.
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.
You are my favorite channel for Javascript related tutorials!
Thank you so much!
Please keep making content on web components!🎉
Will do, thanks!
Thanks Chris, I look forward to more of this content. FYI, I found you from Kevin Powell's Front End Friends, CSS channel on RUclips.
Glad to have you here!
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!
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.
Clear explanation!
Thanks!
Eye-opening.
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.
I love this content!!!!
Delighted to hear that!
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.
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/