How to build your first Web Component

No video

How to build your first Web Component

Рет қаралды 2,197

2 ай бұрын

Source code: gist.github.co...
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.

Пікірлер: 34

@StevenJuarezIR 2 күн бұрын

This is great content. Straight the the point and easy to follow. Please do more on web components and maybe a video on using web components with htmx.

@terhuneb 2 ай бұрын

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

@gomakethings 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

Thanks so much!!

@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: kzfaq.info/get/bejne/aLlkYJdj29C-p40.html In part two, I'll be doing exactly this: using custom attributes to define some initial values and default overrides. Thanks for watching!

@bobmonsour 2 ай бұрын

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

@gomakethings 2 ай бұрын

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.

@wizkid7717 2 ай бұрын

Yes Please!

@animarain 2 ай бұрын

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 2 ай бұрын

Thanks for the kind words!

@GondarMD 2 ай бұрын

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

@gomakethings 2 ай бұрын

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

@kevbonett 2 ай бұрын

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 2 ай бұрын

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!

@hefalump56 2 ай бұрын

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

@gomakethings 2 ай бұрын

Thanks so much!

@zeeshandenmark5875 2 ай бұрын

Great video Chris!

@branjwong 2 ай бұрын

This is great! Thanks for teaching.

@gomakethings 2 ай бұрын

Thanks so much!

@tosbourn-vids 2 ай бұрын

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 2 ай бұрын

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.

@davidluhr 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

@@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 2 ай бұрын

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 2 ай бұрын

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

@michaelthorne455 2 ай бұрын

bind is not exactly a "hack"

@gomakethings 2 ай бұрын

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.

@pechyvo 2 ай бұрын

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

@gomakethings 2 ай бұрын

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!