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.

what about lit framework?

Good video. IMO a couple of mistakes though. One, the spec insists we do NOT add/remove elements in the constructor. Two, persistence (localstorage) should be handled externally to the component.

Completely agree on treating the DOM as the state of the application. It's so much simpler and the available DOM APIs are powerful. My personal favorite is using the `append` method. If the appended element is new, it'll add it to the DOM. If it already exists, it'll automatically move it into the new position with no additional work needed.

Great stuff, thanks a lot!

would adding a title to the button svg serve as accessibility? i've heard to not mess with aria unless you really know what you're doing.

Thank you, thank you, thank you for including aria and accessibility stuff. So many tutorials omit this, and it’s frustrating. Accessibility stuff should be built into codes and projects from the beginning.

I know you are The vanilla JS guy, but you teach me more about ARIA that anyone. THANKS

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 = this.list.querySelectorAll('li'); let item = items[Math.floor(Math.random() * items.length)]; this.result.textContent = `You picked ${item.textContent}`;

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

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?

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.

Nice video. 100% agree on shadow dom usage.

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

that's so cool