How to build your first Web Component

Source code: gist.github.com/cferdinandi/5...
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.

[@trych6869]

Yes, please make more videos on web components! For example, how do I cleanly create initial property values via data attributes. Thanks for the great video!

[@gomakethings]

This week I released part one of a two-part series on building a slightly bigger component: kzbin.info/www/bejne/aISXXmdoq8-Nrbs In part two, I'll be doing exactly this: using custom attributes to define some initial values and default overrides. Thanks for watching!

[@terhuneb]

I appreciate you also show how to properly comment/document the code. Thanks for all you do!

[@gomakethings]

You're very welcome!

[@patriciodelboca7898]

I'm extremely excited about Web Components! Thanks for the tutorial! It feels fresh, straight to the point and clear!

[@gomakethings]

Thank you so much for the kind words!

[@emmanuelcartelli2728]

This was a fantastic and straightforward introduction! It would be wonderful to have these 'Quick Tutorials' on a weekly basis. The video format is excellent in my opinion. It keeps explanations simple and gets straight to the point.

[@gomakethings]

Thanks so much!!

[@GondarMD]

Great intro to Web components - thanks for the video and your newsletter...

[@gomakethings]

So very kind of you to say. Glad you enjoyed it!

[@hefalump56]

Awesome Chris. Would love to see a lot more content like this.

[@gomakethings]

Thanks so much!

[@bobmonsour]

It's amazing how simple this looks when it's well-explained. Thanks, Chris! Yes, please...more like this!

[@gomakethings]

Thanks Bob! Web Components ARE simple... when you don't dive into slots and shadow DOM and all that. Frankly, a lot of that stuff is unnecessary (IMO), and makes them worse, not better.

[@zeeshandenmark5875]

Great video Chris!

[@wizkid7717]

Yes Please!

[@kevbonett]

Great intro, Chris. I've been using Web Components for a while now, mainly because of people like you posting about their simplicity & usefulness as a progessive enhancement to standard HTML. 😁

[@gomakethings]

Glad to hear it! It wasn't until Jeremy Keith shared the PE approach that they finally "clicked" for me. Glad you're enjoying working with them, too!

[@animarain]

I came from the newsletter! I rarely build web-pages, but when I do, I always liked working "with the grain", as you say. I was so happy and amazed when I found your newsletters! You were such a relief! I hate - and I don't use this word lightly - the abomination today's web development is.

[@gomakethings]

Thanks for the kind words!

[@branjwong]

This is great! Thanks for teaching.

[@gomakethings]

Thanks so much!

[@tosbourn-vids]

Thanks for sharing, Web Components are on my list of things I want to get much better at using! Potentially silly question but is there a benefit to setting ARIA as you have or could it have been in the HTML of the button? I was unsure if you set this just to show you can, or if it should only be set when the browser is treating it as a WC

[@gomakethings]

Not silly at all! Definitely could have been hard-coded. I generally like to add accessibility stuff when my Web Component loads just in case the dev forget, but in this specific example, it was more for teaching purposes. The button is useless without JS anyways.

[@pechyvo]

Thank you. What are the benefits of using web components? When is it best to use them?

[@gomakethings]

Great question! IMO, Web Components work best in the same places you'd otherwise use traditional DOM manipulation. They provide an easy styling hook thanks to the custom element, and make storing state and targeting elements a bit easier because the custom element encapsultates the HTML and can be accessed with the `this` keyword. This would make a great future video, though!

[@davidluhr]

Great introduction. Let's say the web component wraps 2 buttons. Would you add a generic event listener to the component `this.addEventListener("click", this);` and determine which button was clicked in `handleEvent` based on the closest matching `target`? Or, is there a way to still attach dedicated click event listeners to each button? If I understand correctly, these event listeners will be garbage collected automatically, so there's no need to remove them in `disconnectedCallback()`. Is that right?

[@kevbonett]

To answer your question about garbage collection... yes, you are correct. No need for removing event listener in disconnectedCallback. You can add/remove global event listeners in connected/disconnected callbacks if they're for DOM nodes outside the component... e.g. on the document or window, for handling resize or scroll events.

[@davidluhr]

@@kevbonett Thank you for the clarification! That's interesting to listen for events outside of the component. That works well with how I use custom events as a simple "pub/sub" approach.

[@gomakethings]

You've got it, and what @kevbonett said is correct *as long as* the event it attached to the custom element and not something outside of it. So your example, this.addEventListener() with event delegation, is likely what I would do, and it will be garbage collected.

[@davidluhr]

@@gomakethings Perfect! That's what I've been doing but wasn't sure if you had a different pattern you liked. Thank you!

[@michaelthorne455]

bind is not exactly a "hack"

[@gomakethings]

I get what you mean. It's not a hack in the sense that Function.prototype.bind() is a platform method designed specifically to modify the context of `this` in a function. But it also creates a new instance of that function, and is very much a workaround. While you're technically, semantically correct, my point was that there's a native way to avoid all of that and handle events while maintaining instance context much more easily.