Видео

Very interesting approaches, I learned a lot as always from your videos, I really appreciate your extensive knowledge. One very interesting thing I found in my research is the Declarative Shadow DOM, it allows you to include html inside the Custom Element (as you mentioned at 6:40), but initializing a Shadow Root without the need for Javascript!, and thus get the benefit of style encapsulation and optimization benefits when using <link rel="stylesheet"/>. I want to thank you for answering my question in such a complete way, it really helps me understand different perspectives about the problem. I also want to tell you that I really like the approach of your channel showing that you can do really cool things with vanilla Javascript, which is very different than most content creators, because of the frameworks that I think sometimes overcomplicate things. Keep going!

One approach I take for placeholder content in loading states is to duplicate the final markup but set aria-hidden="true" and visibility: hidden. It will occupy the same layout as the final content without magic numbers and is more future proof as styles evolve. The tradeoff is more markup to manage.

How you deal with Layout Shift with Web Components?, I am developing a text input custom element, but when the page refresh, there is no space occupy by the element until milliseconds later when it renders and the height of the element is not predictable before it loads. I am using Astro as SSR framework BTW.

Hi Chris! Another great and helpful video. Could you share those articles that explain how you can have global styles bleed into the component?

I'm using something similar to this for a set of alert banners that are being served by our cdn. Super useful.

Im researching about web components to make our design system stable and consume them via wrappers according to our own frameworks like react 19, angular, vue. This is literally the only channel where I'm spending all the time. So good!

The Hollow Shadow DOM - <slot>

Good stuff and being able to utilize both "worlds" was something I was curious about. Still learning but getting there. Thanks for explaining this very useful.

Super relevant to my exact current project! Didn't know you could do this. I had several components that don't even need a shadow dom at all now that I'm thinking about it rationally.

Great Video! From my understanding, web components it's a browser api, it's not a component application abstraction despite the name. The problem with web development in front-end today is that: either you need a heavy and difficult framework or you have to write it from scratch like the example in the video. I wrote that exacly same app in jails-js. Which is a library that's pretty much closer to "vanilla" development. It's about 63 lines of code compared with the video which has 175. The problem with vanilla style is that you have to create everything on your own... but I really believe that there's a space for libraries that can automate that with just 8kb.

Nice job 👏

Too few views.

Quite a bit of overlap with ruclips.net/video/OAfoK5MTS5Q/видео.html ? There was no 'settings' property for the web component in that one. Not to say that overlap is bad.

For a moment I was puzzled by the 'is-filled' attribute thinking that it just showed whether a square was filled or not. But looking at the code I understood that the attribute actually represented the character being stored in the square.

The use of ${pick} was a bit confusing. It looked like you were using template literals but you are not. You are using ordinary strings and ${pick} is simply a literal piece of string to be replaced.

Thanks a lot. Looking forward to a new series about web components. I still can't get why they get so much hate from the dev community.

I think your original issue was not local storage, it was that you were looking at the attribute on the custom element, which always has the placeholder, rather than the actual element inserted. In other words everything was working fine! For the emoji issue, it looks like there was an attribute on the list item with just the name. So I think you could use that instead of having to remove the emoji?

Excellent series, a series with workers would be a good idea 👍

Great way to round out the series! I know you've almost certainly mentioned this elsewhere, but some people may not realise how awesome it is that this could even be used inside another JS framework, or could be used to have multiple web components trigger events on each other. Or obviously just with a little extra vanilla JS when that's all you need! As many have said, this is really how web components should be taught, and then only much later actually introduce the Shadow DOM as an advanced concept with specific use cases that most of the time you don't need. I'm a little sad that your series is finished, but otherwise still look forward to your next video on whatever that might be about.

This is pure gold, I've followed your web component series with great interest. Since then I've already re-worked some of the code I used into web components, and it works just perfect! I did a working calendar web component, kanban board, user session timer and even a snake game, all customizable. Again, pure gold, anything else on the web is about typical shadow-dom'd components, but your approach just sticks with me. I have still much to learn, so please keep up the good work!

Dope!!!

Excellent explorational video. The live debugging is also really cool, there are tricks to learn on all aspects of programming and debugging is a big part! Thank you for the content!

@gomakethings Chris, just wondering about your choice to use Array.from(_nodelist_) rather than [..._nodelist_]. Is it a performance thing, or perhaps readability...?

What's going on with people recently saying web components are not a good practice (most precisely that they suck)?

great stuff, I would say in the coming years depth is where its at and striking the balance...So this type of content is really helpful.

Love this, until recently I only followed you on Mastodon, but these videos are very good. I especially like your "train-of-thought" way of coding. Will this series get to web components with slots/children? Coming from a mostly-React component model, I struggle with making web components that can act as wrappers, parents, etc.

Nice! You built one of those "I will select a random user from the comments below and send them a $10 gift card" thingees! Looking forward to part 3.

Loved it! Sat back in my lounger and enjoyed watching you code up this little example. I now have a better idea of what web components are, and I much prefer this style of front-end web programming to React. I also like that you use a font that's large enough to be both readable on a TV screen and a mobile phone. Excited to see where you take in part 2 of this video! #Vanilla4Life🍦🍦🍦

I feel you... you like native... you even not use arrow functions

Hey this is was really great. I appreciate the explanation of "why" we are doing things a certain way. Nothing drives me more crazy than a tutorial that doesn't teach you anything.

Really enjoying these Web Component videos Chris

Hi, I'm new to your channel and i would like to thankyou for covering about web component since i was really interested about it

Hi I like the way you think in terms of using vanilla web components. I used to be a Delphi developer until Delphi ver 7. I'm going to have to start watching your stuff. I need to learn to get under the hood and see how these things work. Please continue on with your components and making web web applications. You perform a good service. Clark

Hey chris, how would you handle routing when working with web components?

I liked the accessibility bits you had going on

How to pass callback functions as props to a web component? Specifically, I want to create a form web component that accepts three callback functions as input: 1. `beforeSubmit`: a function to execute before the form is submitted 2. `afterSubmit`: a function to execute after the form is submitted 3. `onSubmit`: a function to execute while the form is being submitted What are the best practices for passing these callback functions as props to the web component?

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!