Can you build a web app with vanilla Web Components in 2024?!?

⏳ Timestamps
00:00 - Intro
01:04 - Lean Web Club
02:18 - Building a Web Component
29:06 - Conclusion

[IainSimmons]

Great video, it's awesome to see it all come together, and in a very approachable way.

This is the kind of thing we should be teaching new devs instead of throwing them into React bootcamps.

Looking forward to the rest of this series!

[RedBlade]

Web components are growing on me, these last few tutorials are a really great intro to them.

Your teaching style is great!

I also like that you take accessibility into consideration as well as documenting your code!

Thank you for your videos, I'm seriously considering subscribing to your courses.

[stacherski]

Man, this is brilliant! Just what I’ve been looking for! Keep up!

[emechem]

That was super useful, thanks! 🙏 For self-interested reasons, I'm looking forward to hearing you cover local web storage in future episodes. Thanks again 🙂

[CristianKirk]

Hello there, I just discovered your channel in twitter because of your critique of HTMX. I'm kind of a web developer that only likes to use pure (I hate the term vanilla) html+css+js for the frontend and uses PHP for the backend (because that's what they use at my workplace, I'm actually okay with it). For several years now I haven't been able to "connect" with js frameworks, partially maybe due to the fact that I haven't got the need for it. Now, at the beginning of the year, I started working on a project that made me go "okay, this is it, this has to be modern website, with no page reloads, interactive and all of that good stuff, we will have to use a framework." In the middle of that process, I became aware of HTMX, and I just fell in love with it. HTMX allowed me to build the site only using html+css+js and make it as interactive as I needed. I don't see HTMX as a framework at all, I see it as a library that makes ajax requests super easy. So, my question for you is, if you wouldn't use HTMX, then how would you build a modern webapp without a js framework that requires to retrieve data from the server? Thanks in advance!

[TechInSimpleEnglish]

Chris is a great programmer. Thanks for sharing

[Orion]

This is great. As much as I dislike the massive boiler plate, large file sizes, complexity etc, from old Redux and React. The complaints about React gets tiring after a while. It's great to see this hands-on video showing how to get things done.

[rupen]

I'd love to watch this but I can't look at a white screen for 30 minutes

[netssrmrz]

Nice video. 100% agree on shadow dom usage.

[mrsauli]

Love it Chris.. Great video once again. Only thing I'm wondering about, why not use a more pure this.items array as a data source, instead of going into the DOM and getting the items from there?

[cb]

I’m not sure how you can say the shadow dom is an anti-pattern - whatever that means. I would think the reason why most devs reach for web components, myself included, is to make our components usable on other peoples websites, the sites we have zero control over. I work for a company that does personalization and it’s critical that our components look and feel are not at all affected by the host site - and vice versa. I don’t think this is an edge case, it’s the promise web components offer.

[BenHewart]

I think its great that a youtube channel is finally doing native web components! I love it... and love web components but
I think I disagree with the shadow dom being an anti pattern and styling is way easier being encapsulated... components are mean't to be self contained so they can be used through out any project without clashes with global code.

if you want global styling the you simply create a global style sheet and use custom properties ( or css variables )

Global style sheet:
:root {
--bg-blue: ##4187f7;
}

component styles:
<style>
background-color: var(bg-blue);
</style>

Another issue mixing light and shadow dom is CLS obviously light dom will load first loading content first and then loads in shadom dom after this causing jumping, as far as I can see its better to stick to the shadom dom or the light not to mix them.... otherwise you will have to constantly reserve space for the shadow dom

Open if anyone has any other solutions? Still learning all the awesomeness of web components

thanks and keep up the great work!

[sanderlissenburg]

It's better to use the connectedCallback instead of the constructor. I ran into an issue that the javascript was loaded before the dom was loaded/ready. This is because I load the javascript in the head instead of the bottom of the page. I know I know I should change that. Either way I think using the connectedCallback is still better.

[ke]

Can you define all your custom elements in one file and then import them into whatever file they may be used?... Or really in the context of web components, just define all logic for a "component"/custom element in its own one file?

[FlorianSchommertz]

Am I correct that not using shadow DOM forces you to run the script after the DOM has loaded?

[tomknowlton]

Are you on a Mac? But my real question is...around time index 6:51, what are you using to search for "gmt uuid" -- is that some sort of custom search engine you wrote? Or built into Macs? How did it know what gmt was?

TIA

Tom

[bourge]

I ran into problems when i tried to use a vanilla WC in a Next.js. Turns out SSR apps are not to friendly to WCs. Are there any thing we can do to solve this?

[pragmasoft]

Frankly, I'm disappointed. This video shows how to build a web component (not even reuseable), of which there is a ton of on YT, instead of telling what its title promises - how to build a full web app, which is a lot more than building simple web component. Under a web app I expected to see a composition of components, routing, state management, client to server interaction, caching, auth, packaging, building, publishing, deployment, version updates, and so on.

[muhaimincs]

How do you organize the code? How do you load the data? How to handle racing condition? How do you handle state of components without shadow dom? How about you just rephrase this YT video title?

[HeribertSchuetz]

Are you planning to use the shuffled array for further functionality? Currently it feels like overkill. It should suffice to just use a random index to pick an item. The `shuffle` method could be removed and the body of the `onclick` method would just become

let items =
let item = * items.length)];
this.result.textContent = `You picked ${item.textContent}`;