Please keep making content on web components!🎉

Where is the follow up to this video? You talked about decoupling the data storage. I would love to see your implementation.

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.

Im surprised you havent mentioned htmx at all, it seems like it'd be right up your alley. HTMX + web components + Reef would be an insane combo

Your library looks very cool! I will definitely be using it

Love It!

Hey, just a little thing but a few times (e.g. 12:15) your coding was covered up by your picture. Might want to scroll a bit in future to keep the code visible :)

a tabs system with web components would be very useful

Love your content... I wish I had found it 12years ago... It would have saved me lot of time on my VaJS journey...

Very interesting. I like how simple you made this look. I was wondering if it would beneficial to make more components as one would tend to do in React. So, even though the Square is basically just a button, it does have state of ' ', 'X' or 'O'. Or on the other hand, from the way you explain Web components before where wrap vanilla HTML in the HTML file with a Web Component, could you take most of the HTML out of the component and place it into the vanilla HTML section.

What's your typical threshold for when to use state-based UI? When traditional DOM manipulation is becoming too much? I have a project that might be at this threshold. The project involves an and a UI that modifies content inside the . When the user interacts with the UI, we dispatch a custom event to update the , update it, then dispatch a custom event to update the UI. This was fine for a while but some updates to the UI were getting quite complex. For now, I switched to simply re-rendering the UI and managing keyboard focus for accessibility. It doesn't seem to harm performance at this scale, but it's a potential future issue. With a state-based UI approach, I guess I would maintain a central data object that represents the shared state of both the and the UI? Reef may be a good fit for my needs in this case.

Great stuff

Wow glad I inspired u haha. Or maybe not. Let's watch this.... If I understood well, line 118 will act like each time u change the object square it will trigger a rendering.

This is a great showcase of how easy/simple web components are compared to React. I would love to see more direct comparisons like this project!

You could build a tic tac toe using html, no javascript. Lots of files though, one for each state the board could be in. Clicking a cell links to the hpertext file representing the new state. Inherent history/undo as well. That way it could even work on the Lynx browser.

Amazing tricks, except #13... 😀

Great video! I'd love to see more of these types of videos, comparing JS framework code to regular light DOM HTML web components! One thing about your app logic... Can you not just use the fact that the next move alternates between X and O and whether the index of the history is odd or even to determine what it should be? And can you just remove the list items and history with an index higher than the clicked one, in handleJumpTo?

Thank you I like that. This is how I work too with webcomponents: TDD on the browser when the webcomponent is not very complicated. Also I used to store the state in the DOM too but I've changed my method because I've founded that it's more complicated in a complex application. Now i store the state of the whole application in a centralized object (a little bit like redux does). Unfortunately I don't have the observation (subscribe and dispatch) mecanism yet in place but I'm working on it.

“I like to use const for everything” *immediately changes const to let* 😆

Van JS is a good alternative too. I was thinking for the history creating a square custom element and then storing all that information in there and then looping through the custom elements to update any history. Like `square.removeHistory(3)` Where 3 would be the history index. And when adding a value you can do `square.setValue('X', historyIndex)`. Something like that. Then you have a different class handling a lot of the things.

Amazing video idea. I always wondered how different making custom web components are to react implementations

im starting out in development. done a 2 year course on front-end where a lot of focus was on react. i feel like there are a lot of basic javascript knowledge that has flown over my head by transitioning over to react too quickly. I really like this type of content. because by comparing and practicing vanilla. It at least feels like i get a deeper understanding on how the language work, and how different programming logic and approaches can be applied. so super thankful:)

How did you write the Custom Element innerHTML in the constructor? I get an error unless I attachShadow and write the shadowRoot innerHTML....

This is a great demonstration of the value of writing vanilla JavaScript: When you write framework code, you improve your skills in the framework. When you write vanilla JavaScript, you improve your skills in JavaScript as a whole. Sure, you use some vanilla JavaScript in React, but it's a narrower slice. Even if you create solutions that can React solve in its own way, your solution is tailored to your specific needs and context, and you gain more transferable knowledge along the way.

JavaScript owes you, mentor. Then so does the community. Thanks for keeping me in check.

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?

The CV says "senior" but the code has "document.getElementById"

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

I like this, good video thanks

Starting this series now

Why shuffle the array when you can just get a random index? array[Math.floor(Math.random() * array.length)]

Thanks a lot. This series is being very useful and it's hard to believe there are no more channels teaching about web components..

"Developer ergonomics and ease of authoring code" holds true for the first 5 minutes of developing react. Once you add all the hooks, router, redux, component library, jss its all over. Adding abstractions to fix the horrible abstractions until you have a mess that is most react projects.

Great content!!! Ideas for new contents? What about "making a new simple design system" (framework agnostic) using web componentes and css best practices?

i'm guilty for using web components as an alternative to vue. right now i'm rewriting a SPA. i wanted to avoid the excessive tooling and ever changing apis. honestly it's so much more fun!

Great series. How would I go about writing tests for these web components?

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!

Thanks, very clear :-). I wonder why, in the count component, you inherit from the HTMLElement and not directly from HTMLButtonElement?

The answer is yes

Do you think this is a good way to go, using a cloudflare serverless function, if you're creating a chrome extension that calls the Notion api ( but notion doesn't allow you to make calls from the extension ). I need something somewhere on a paid server, that receives some text data, and then makes the call to notion api which makes notion happy. I was also looking at supabase for their serverless function capability.

Very interesting approach!

Luv it! Question: I've got troubled running into swapping elements issue. How do you have all the elements within the web-component readily in order for execution by the DOM? Sometimes in the console window said undefined or not found?

great series. Informative and simple

Thank you for mentioning an ES Module implementation too.

Really enjoying this series! I'm not new to programming, but new to web/js and it is an interesting time to be learning. As flavor of the week frameworks go in and out, this kind of 'back-to-basics' feels timely. Thanks for the videos!

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!

I’m enjoying the series, thanks for putting these together 👍 Do you have any plans on showing option on how to encapsulate the web component code within the component itself and how that then gets consumed by the HTML? I hope this makes sense.

The event management feels clumsy. Do you have or could you do a video covering it in more detail? As in pros and cons compared to other methods. I'm wondering if I should change my approach.

Thanks for sharing! Very nice. Looking forward to the next session. One thing I would like to see is the thing at the end you briefly mentioned. How would you "upgrade" this to use the dialog element instead of confirm?

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.