Maybe this kind of framework-agnostic, standardized tech will eventually end stuff like React. I mean yes the thumbnail looks like a clickbite but it could be as well close to the truth
My company uses them heavily, they moved from angular to web components and made their own library, it's still new to many new joiners coming from react/angular background, it's like a new playground for us but its fun, we get to learn more core stuff about javascript and browsers.
@@Ryan-mg2uv Guys, you are annoying, i try to learn react with it's all libraries, but someone always saying "end this", "end that", "use something ${random} different", it is not about "Web Dev Simplified", it is Zoo
Well, Kyle, you just blew MY mind... I'll have to watch this video about 4 more times to fully absorb it but my first take is that this is incredibly powerful and somewhat fortuitously perfectly meshes with the technology that I've recently developed for my current project. I built a class-based component system from scratch which allows me to encapsulate the HTML, callbacks, and event handlers of a component into a Javascript class. (I punted on the CSS - it's all in one big file!) So all of my components are ALREADY Javascript class instances. By tweaking a few things I can perfectly integrate with web components! I'm floating on a happiness cloud right now. Thanks for this, I'm going right now to get a celebratory beer!
if you're already coding on that level, I'm surprised you haven't heard/played with web components earlier. They're basically supported since late 2018 and anybody who loves writing JS classes wet dream :)
I've watched a number of your vids, but 2/3s in, this is my fave of yours ever by far. In recent years I've tried doing web components using Angular and Svelte. But this vanilla is version is super clean!
I see where Svelte garnered a lot of inspiration! Svelte doesn't use web components, but I just really appreciate the abstraction it allows that work in a very similar way.
You can learn typing in 4 days of 45 mins a day, I took your great React course but typing mistakes ruins it, I think a basic typing tutor software for 4 days, and you are good for life. friendly advise to a great teacher. thank you
I'm still somewhat derusting on Web Dev and sticking to more basic techniques, but I will come back to this tutorial as I can definitely see this becoming useful in the future. I can also see why it may be easier to just use a framework such as React ;) . I also wanted to say that I really love your channel and everything you show in your videos!
If you are into Objected Oriented programming, and are working on a front end only project, it really is the way to go. That is, if dont want the performance and SEO issues that come with straight up using react or similar without server side rendering If you are building a webapp you know will be big, yeah setup next js. If you have to build a few features, like a cart for an ecommerce site, i personally dont see a point in react.
Yeah i see this is maybe good to pair with old school backends like django where you need few dynamic components. Components are a good native way of doing frontend.
Web Components + CSS Module Scripts (import assertions) + CSS variables (Custom Properties) are the best modern web APIs in my opinion. They make developing large web apps a lot easier to maintain. Also, Redux and MobX work very well with Web Components.
@@konfcyus4865 Why would you need that? I don't know any big app whose architecture and code are high quality. Seriously have you ever look at Meta or Google websites? You have the worst possible mentality. Become an artisan, an artist coder. Don't follow the extremely bad practices of big corporate apps.
@@Kiev-in-3-days I would need that to have an idea and understanding of how they can be integrated to a large app , to learn. Afaik google and meta uses WC for some widgets , becoming an artisan requires you to use the most optimal tool to solve a problem , my experience with WC is that they are not optimal.
I'm implementing an Infinite scroll from scratch, without any JS frameworks, thought of using native apis just like web components. Thanks for this tutorial! I get it more now :)
Note that Safari does NOT support customized built-in elements (is=""). Great video - love web components (which actually already exists for like 10+ years) and their reusability. I believe that this is the future. I got tired of new / changing frameworks and you don't always need a JS framework. Also for everyone who doesn't like to write HTML in JS, you can still wrap the HTML in your custom tag, like it is shown with the default slot. That way you can e.g. use your server side rendered translations or just put everything into a partial, to be able to reuse it.
Kyle, I am constantly impressed by your professionalism and the scope of your knowledge. you are obviously very well-educated, you always use correct terminology and clearly understand the terminology quite profoundly. I am curious about how you developed your knowledge, are you self-taught, did you do a good bootcamp, or what?
Great video, learned a lot, just small note, that it is a bit dirty to put a list into a list instead to put a list into a list item if you want a nested list
I just recently learned web components, and they're really awesome. There's also Lit framework based on web components. I hope you can also make a video on it as a followup.
Thank you for this video. I've been using Vue and the various slots for is components for a while now. I don't see myself writing my own custom elements. But this did help me better understand what's going on under the hood in Vue. And that makes it easier to use and, undoubtedly, I'll make better use of what Vue can do. The slot feature won't seem like a mystery in a black box now.
Great video thanks! I've been using web components for the past three years and I absolutely love them.Much easier to work with than React. I'm never going back.
Great tutorial on Web Component! Most frontend developers have only heard of web component but have no experience with it. I often hear people talking about Rust and web component together, can Kyle introduce the connection between these two things? That would be so cool!
I have never disliked a WDS video until this one, and it's only because of the click bait. You're better than that, Kyle. I'll continue upvoting all your other vids that don't resort to click bait.
@@winzyl9546 Now I am in a point in my programming career where I might never touch a front-end framework anymore. To be honest, yes. I do not understand React but now I don't have to.
I've been getting into WASM a lot lately and self contained components are amazing to use with the blazor implementation. I think this is the future of web development. The concepts are tricky though and I, like others need some time to absorb it.
I use web components almost 2 years for building Design Systems that are agnostic of the JS framework that are going to be used. Web components are feature proof because is plain JS and CSS. To build my components I use StencilJS that is a compiler that uses Typescript and JSX and in my humble opinion is superior than Lit Html.
Thanks a lot Kyle on this video about web components. It turns out that web components can actually be shared between different frameworks (React, Vue, Angular, Svelte?) so this is one big reason to learn about them. Although TBH, this video does make me appreciate how much React has simplified building components, seeing as the class-based API for web components can be really verbose.
Honestly after looking at this I can say that it is better this way than too simple way. The biggest problem with react is that it do too much behind a scenes and if you don't know it too well you will make mistakes and wont understand how some things got work until you spend a lot of time with a framework and not just keep repeating mistakes, but learn new things and how better to write code with it, which becoming in the end a lot of time consuming task.
@@anshulanand02 So can i publish a vid with "US president died today?" And a thumbnail of biden with a cross on him and gain millions of views and lots of money? Is that fair? Isn't it clickbait?
When I was at a full-stack bootcamp, one of my teachers who was a real smart guy from MIT was basically trashing on React. He said that web components and things like the shadow DOM already make your website fast, and that React was unnecessary for this (granted he still had to teach it to us). Ever since then, I've been super curious to see if it's really true. I wonder if someone can make two identical sites with React vs. Web Components & Shadow DOm, and see which ones faster.
Many developers prefer to use frameworks like React or Vue because they provide a higher level of abstraction and a more opinionated way of building web applications. Additionally, React and Vue have large and active communities, which provides a wealth of resources and support for developers. One of the main disadvantages of web components is that they are implemented using classes, which may not align with a developer's preferred programming paradigm or style. Classes in JavaScript are a relatively new feature and some developers may be more comfortable using a functional approach. React and Vue both provide a functional approach to building web applications. React's components are implemented as functions and Vue's single-file components can be implemented either in class or functional way, so if you are more comfortable with functional approach, you can use frameworks like React or Vue, which provide a functional way of building web components.
Yes, I agree about the frameworks. I do think they handle a lot of these "behind the scenes" scenarios so I don't have to. Not all the funky ins and outs are handled by every browser and the fact that the different frameworks implement the same thing differently shows that the approach is far from obvious. Frameworks are a good way of piggy-backing on the expertise of others and to use the new features without having to rewrite the application business level code. As I was watching this video I did occasionally think "I wonder if that is how Svelte does that?". Sure, you give up a bit in terms of absolute flexibility, but even that is not necessarily a bad thing ("style guides" vs "fantastic innovation - what do you want in your UI?). Selecting and customising components shouldn't be an every day task. Once you have them set up devs should be using them no re-writing them for every page. The aesthetic of consistency should be paramount. The sparkle of OOP tarnishes when it hits the real world. With the addition of classes, Javascript is evolving from a Poor man's Lisp to Poor man's Java - not a step forward. I'd rather see the world move from OOP to Functional than the other way around. But as with evolution where Platipus and Coelacanth are still perfectly evolved for their niches, perhaps JS is destined to have some dead-end variants.
How useful is Web Components? Usually modern day in industry the challenge we face is moving away from old front end frameworks to a newer one while still supporting the legacy applications. It would be great if we could have web components built in react that can have their own styles which are then embedded into legacy applications which allows for seamless transition from older to new framework.
nice overview of how these beasts work. 👍🏻 A bit more about scoped styles would've been nice. The "expandable-list" however is essentially + just lacking all their native features and accessibility stuff thereby demonstrating that it's often a really bad idea to recreate any interactive native HTML element from scratch. It's usually the lack of keyboard support, ARIA, and the presumtion that everyone is using a "fine pointer device" (mouse) with a scroll wheel.
I think something is missing from the video: emitting events from web components so you can addEventListener on your custom todo-item, to know when the user ticks/unticks them. Do you just bubble up the events through attributes like ... and this.addEventListener('change', (e) => this.onChange(e))... or something like that?
Does this javascript have to be shipped out to the browser or is the underlying DOM composed finally of "standard" HTML? I ask this because it has implications on server side rendering versus sending pages as a more front-end heavy single page app.
Web components have been the future since 2015, I’m amazed people isn’t using them. WC are based on web standards which won’t change depending on the framework you use, react/angular/vue standards change from versión to version, but WC don’t. The learning curve is a bit more challenging. But man the re-usability is endless. You can have an input-core component with tons of custom features/events/attribute and simply when you need it import it, but if you need specific things but not necessary to change the input-core wc you simply extend the input-core and make a new one with the benefits of the base class and the benefits of the new implementations without losing time
Ah ty for specifically mentioning inheritance. So you have implemented this DRY approach with web components? Any gotchas or tips/vids regarding this specifically? All I seem to find is using Lit/Stencil which seems to defeat the non-framework approach.
As is the custom "todo-item" checkbox will not be part of any form submit. Why ? Because the shadow DOM hide the checkbox from any parent form. To avoid this your custom element must either extend FormElement instead of HTMLElement or set the static "formAssociated" value to true. Like Kyle did for the "checked" style, your custom element should also mimic and propagate the behavior of the parent form element regarding state|value change, reset, validation ("pattern" property and :valid :invalid pseudoclasses for styling) and autocompletion ("list" property). The input may also act like a form element without extending FormElement by altering the formdata value generated on form submit. I don't like this idea because it implies that a custom component may spy formdata submits without being visible in the DOM (so could read or alter value from other fields of the formdata....).
This is both amazing and very cumbersome compared to something like Vue .. which is why I wont use it unless it is absolutely necessary. But awesome job with the video, if I ever need it I am sure I watch it again :D
it's worth giving a shot on smaller projects. Even better if using a web-components based framework like Enhanced or WebC. I know it's another framework, but it's much more future proof
This is really cool! Thank you for pointing it out. I agree that it could happen that we no longer need libraries for most of these things. It's similar to how it was only through Bootstrap that you could easily make Grids and Flex but now it's something in most browsers. 👍
web dev as usual with the best content, that can teach us about shadow dom faster than any other course, thank you for your hard work. If my development skills are awesome is because of this legend! 😜
You can import css from external file with type assertions and use components js native constructor instead plain html with innerHTML (its a bad practice btw)
It's refreshing to write code directly against the web browser's API using current web standards instead of being limited to calling an opinionated library/framework.
What would advance styling look like for these custom elements? For example, in the various websites where this could be used, the projects might use bootstrap, materialUi, etc.
Great video mate. Fairly new to web dev so possibly a silly question. could these be used a bit like handlebars templates to include global nav and footer elements etc?
Is there a way to get syntax highlighter and completion on the HTML template? Passing string for the HTML and style doesn't seem scalable. I'm spoiled by typescript and vscode extension.
As a big fan of Web Components, I would like to hear from the other side, How a front-end framework might be better. And leave out the fluff about community and a few less lines. I want to know about features provided. In the past, I have used the pre-TS version of Angular for about a year, JQuery for longer, and Vue for a few months. Using Django now on a project, but that's a back-end framework, not a front-end framework. Looking back, I would not return to any of the 3. Learning JQuery felt like a complete waste, since it provided nothing over Vanilla JS. Both Angular and Vue left me addressing bugs that were not mine, and I felt mostly addressed issues I didn't care about.. Only thing I liked about those 2 were how templating worked, but I was easily able to make my own JS code to mimic what I liked about templates. I also liked how Vue used fewer files than something like React, but WC's also uses just 1 file.
come on man, don't go there please, you're one of the best guys doing tutorials about dev. end of react? react killed by web components? man you don't need clickbaits..you're better than that ;) and web components are shit, maybe the title should be: an easier and simplified way of creating web apps using web components.. I'll hit the like button out of respect, but please don't go there
I just discovered that Web Components are a thing but at the end it looks a lot like a VueJs component (with slots, scoped styling etc) except it seems to be a bit more tedious. I think it can be nice for smaller projects and to grasp the components usage
I’d really like to see a web component button integrated into React. Like, how would you call onClick with a custom element and would there need to be something special within the web component to register that something in the virtual dom was clicked.
It's unclear to me why everyone considers React as the only true way to create SPA. React's only (in my opinion) advantage is a large community and lots of additional tools, but that's rather the result of coincidence (React won the lottery somehow). Web Components is a great vanilla way to create SPAs, lightweight and fast. I disagree with previous comments that clickbait is irrelevant here, good job, it's time to adapt to new technologies, sooner is better. Thanks for great video!
maybe helpful for vanilla js project. if you have already adopted React or other frameworks which support component, this looks too complex to be integrated.
So this is how I define the component, how to get in on the page and how to interact with it from the HTML side. Great. But the interesting stuff is still a mystery. How do I get multiple components to interact with each other? Maybe one component is a custom sortable table and with a second component a user can filter the data inside the table. And maybe a third component for the pagination of a large dataset shown in the table. All of these components have to talk to each other and use the dataset, probably stored in a javascript array. But how? Any chance for an equally enlightening follow up video?
Here are some common ways to send data to a WC. Method calls, attribute changes, and Custom Events. I find Custom Events to be the most useful of the 3, since you can attach data with it and bubble it up only as far as you want to. Working with nested components is when WC's starts to get exciting. To get them on a page is as simple as placing any other tag on an HTML page. They act and respond like any other HTML element. But since a script drives them, they don't change until that script is loaded. Until the script changes them, they appear as normal DIV tags. Whatever is inside the tag, before the script is loaded, is called the Light Dom. In this way, something does show before the script loads, and not just a blank. Hope this helps. :)
Because React is too bloated and web components are often enough, Lego JS came out. We've been using it for years now and it solved ALL our issues (easy to maintain, native -> fully compatible, no learning curve). It give the web component the little extra skin to update, use conditions and loops for display. That's pretty much everything we need when developing even massive apps.
Certainly need a tutorial on lit element with javascript & its benefits over vanilla web components & server side rendering supports, declarative shadow dom
From my experience, the best way to manage state with multiple WC's is custom events. It's really up to the developer, since you can also call methods on them or listen for attribute changes. But with custom events, you can decide if you just want to bubble up to the parent, or all the way out to the root. In addition, custom events let you carry whatever information you want.
@@gm770 Thanks! Been trying to search for this since watching the video and not a lot of people seem to be talking about it. I think I was overcomplicating it in my head, so your comment is definitely helpful.
Glad to help. Been using Web Components for about a year now, and continue to be impressed how well they work when you start nesting components. Works exactly as you expect it to, no hassle, and great support in Chrome Dev Tools.
I actually tried to implement web components, but when you have to deal with data heavy applications i find web components quite a pain to hydrade, pass props, share data from child components to components up the tree and so on... They are just so barebones. i ended up replacing them with Vue
How to hydrade, pass props and share data is exactly what I was wondering about watching this. Any tips for good documentation or tutorials besides MDN?
@@chrishuhn5065 actually. Nope, i had to read the MDN WC documentation and understad whats up.. the thing is that WC dont bring reactivity to the table. So you still need to use (all be it, better separated) MVC pattern. And i never could get slots to work, so i could not have custom data inside my WC.... So totally discarted them. They are waaaaayy to bare to be functional for me for a real project. Unless you take the time to write a wrapper class that give a better DX for WC... they are not ergnocomic AT ALL
@@chrishuhn5065 also to hydrate them and pass props you have to do this ugly thing where you pass to the web component a data propert like lest say "my-data" in the web component class register that property, set up getters and setters serialiase the input of that prop. Kf you wanted to pass and object or an array. Welp, you had to serialize it as JSON then de serialize it inside the getter of that property for later use
@@fueledbycoffee583 Thank you. It looks like it's as bad as I had feared it would be.
5 หลายเดือนก่อน
This is somewhat nice, but oh dear god I can see the next issues arise. Naming your components in such ways that they do not create issues with other components and technologies used.
Absolutely agree with the thumbnail. When I first heard of web frameworks, I delved a bit into React and Vue. They are the most popular and they have so many goodies for them, as well as good documentation. I quickly realised, they are not exactly frameworks, the way they are built, they are like a totally new language paradigm, they prevent you from using JS and web APIs, or any other web standards, you can only do stuff their way. That's not a framework really, that's like a restrictive layer on top of the web, and a bossy one at that. It's their way only. If React can't do it, you can't either. You can't just use JS, you'd have to wait for future "features". And that's not gonna fly with the speed the web is advancing, or with the upcoming technologies, like WASM etc. In fact, I predict all those "frameworks" like React are gonna die the moment WASM becomes usable and stable. Anyway, good web frameworks are probably those that help you using abstractions, while they still allow you to use JS and any other web API or tech you want, they do not get in your way, and they themselves are based on web tech without braking any standard. I think frameworks like Lit, Stencil, or similar, using web components etc are the good ones. React and Vue redefined what web components are, and they even went further reinventing their own virtual DOM, when a shadow DOM already exists as a web standard. If you don't like web components, there are a few other minimal ones like Alpine or HTMX using different techniques that also don't get in your way. React sucks people, don't use it, don't invest on it, it's gonna die. The only people who would end up still using it are those who invested too much into it and are locked in.
I like the video, just don't like the clickbait in the thumbnail, no need. About web components it's very important to show and understand the basics, but for those who might be thinking that this is so much boilerplate or hard to do simple things, yes in raw way it is, but as a web standard you can't have only one option to do things, normally they try to make it customizable and flexible for us developers create tools build on top of it. That said, I recommend creating an abstraction based on HTMLElement, it can be a class and in it you can create things like automatic rendering based on the return of a render method and the same with styles. Create or use a template string to make writing html easier and so on. For example, the Lit framework does things like I said, but you can create your own
I like to watch your great instructional videos. So please, so not fall into sensational titles and empty content bullshit like many other channels do (not related with web development). You don’t need this to grab views. Keep up the good work.
Man, you don’t need those clickbait thumbnails. You make amazing content and that’s enough for most of us to watch all of your videos
Exactly!
I agree...
Agree
I was looking for this exact comment!
Maybe this kind of framework-agnostic, standardized tech will eventually end stuff like React.
I mean yes the thumbnail looks like a clickbite but it could be as well close to the truth
My company uses them heavily, they moved from angular to web components and made their own library, it's still new to many new joiners coming from react/angular background, it's like a new playground for us but its fun, we get to learn more core stuff about javascript and browsers.
This is the mindset to have, it's a great opportunity to learn something new
Nice, I love those things too, they're my main occupation :)
Our company also use that
@@Ryan-mg2uv Guys, you are annoying, i try to learn react with it's all libraries, but someone always saying "end this", "end that", "use something ${random} different", it is not about "Web Dev Simplified", it is Zoo
@@nix7705 chill bro
Well, Kyle, you just blew MY mind... I'll have to watch this video about 4 more times to fully absorb it but my first take is that this is incredibly powerful and somewhat fortuitously perfectly meshes with the technology that I've recently developed for my current project. I built a class-based component system from scratch which allows me to encapsulate the HTML, callbacks, and event handlers of a component into a Javascript class. (I punted on the CSS - it's all in one big file!) So all of my components are ALREADY Javascript class instances. By tweaking a few things I can perfectly integrate with web components! I'm floating on a happiness cloud right now. Thanks for this, I'm going right now to get a celebratory beer!
if you're already coding on that level, I'm surprised you haven't heard/played with web components earlier. They're basically supported since late 2018 and anybody who loves writing JS classes wet dream :)
You can even import your CSS in JS files with "CSS Module Scripts", it's basically a ES-style import for CSS files :)
I've watched a number of your vids, but 2/3s in, this is my fave of yours ever by far. In recent years I've tried doing web components using Angular and Svelte. But this vanilla is version is super clean!
I see where Svelte garnered a lot of inspiration! Svelte doesn't use web components, but I just really appreciate the abstraction it allows that work in a very similar way.
You can learn typing in 4 days of 45 mins a day, I took your great React course but typing mistakes ruins it, I think a basic typing tutor software for 4 days, and you are good for life. friendly advise to a great teacher. thank you
Far and away, teh best introductory web content in the whole youtube
I'm still somewhat derusting on Web Dev and sticking to more basic techniques, but I will come back to this tutorial as I can definitely see this becoming useful in the future. I can also see why it may be easier to just use a framework such as React ;) . I also wanted to say that I really love your channel and everything you show in your videos!
If you are into Objected Oriented programming, and are working on a front end only project, it really is the way to go.
That is, if dont want the performance and SEO issues that come with straight up using react or similar without server side rendering
If you are building a webapp you know will be big, yeah setup next js. If you have to build a few features, like a cart for an ecommerce site, i personally dont see a point in react.
Same here👋
@@orionh5535 Seo is a myth it’s not 2007 anymore
Yeah i see this is maybe good to pair with old school backends like django where you need few dynamic components. Components are a good native way of doing frontend.
Web Components + CSS Module Scripts (import assertions) + CSS variables (Custom Properties) are the best modern web APIs in my opinion. They make developing large web apps a lot easier to maintain. Also, Redux and MobX work very well with Web Components.
Can you give any examples of a large app that uses that stack?
@@konfcyus4865 Why would you need that? I don't know any big app whose architecture and code are high quality. Seriously have you ever look at Meta or Google websites?
You have the worst possible mentality. Become an artisan, an artist coder. Don't follow the extremely bad practices of big corporate apps.
@@konfcyus4865 Adobe Photoshop for the Web, ING bank, GitHub, some of Reddit, etc etc etc.
@@Kiev-in-3-days I would need that to have an idea and understanding of how they can be integrated to a large app , to learn. Afaik google and meta uses WC for some widgets , becoming an artisan requires you to use the most optimal tool to solve a problem , my experience with WC is that they are not optimal.
@@konfcyus4865 Why does the app need to be large? What does that imply or tell you about using the web spec.
Thanks!
Thank you for the support!
I'm implementing an Infinite scroll from scratch, without any JS frameworks, thought of using native apis just like web components. Thanks for this tutorial! I get it more now :)
Note that Safari does NOT support customized built-in elements (is="").
Great video - love web components (which actually already exists for like 10+ years) and their reusability. I believe that this is the future. I got tired of new / changing frameworks and you don't always need a JS framework.
Also for everyone who doesn't like to write HTML in JS, you can still wrap the HTML in your custom tag, like it is shown with the default slot. That way you can e.g. use your server side rendered translations or just put everything into a partial, to be able to reuse it.
Kyle, I am constantly impressed by your professionalism and the scope of your knowledge. you are obviously very well-educated, you always use correct terminology and clearly understand the terminology quite profoundly. I am curious about how you developed your knowledge, are you self-taught, did you do a good bootcamp, or what?
This is gold. These web components are being used in Lightning Web Components in Salesforce
This guy is the Andrew Kramer of the coding world. Clear, concise and explains the things that people may commonly not know.
Exactly what I was looking for on Web Components.
Great new thing I learned today now I can create my own tags ,etc it's very helpful!
Unbelievable content! Kyle has way of making complex concepts clear.
The best channel in youtube!
Man respect your audience feeling!
End of react, I just started learning it 😂
Great video and great timing - I have just spent the afternoon converting one of my projects into a web component.
20:22 Haven't you introduced an accessibility problem by appending a button element as a direct child of the UL? is invalid HTML.
And also later on when doing sample of the nested list, shouldn't that whole second UL be instide a as well
Fellers... hope the point of the video wasn't missed.
I know lightning web components and always wanted to learn web components. Thank you!
I use this to build amazing many companents. Web components so awesome
Wow that is a lot of power and awesomeness right out of the box. Awesome videos.
All your videos are simply brilliant. Love your channel.
Great tutorial on Web Components. Thank you!
Another minor tip: VS Code has an extension for syntax highlighting HTML or CSS template strings.
@Julio Caesar es6-string-html
Great video, learned a lot, just small note, that it is a bit dirty to put a list into a list instead to put a list into a list item if you want a nested list
I just recently learned web components, and they're really awesome. There's also Lit framework based on web components. I hope you can also make a video on it as a followup.
Lit copied core concepts from HyperHTML and gave no credit to the dev. Is what it is, but I'd check out the original work.
@@trappedcat3615 lit is based on polymer that was the prototype for the w3c for web component.
can you please share from where did you learn this, is it just from official doc of lit ?
Thank you for this video. I've been using Vue and the various slots for is components for a while now. I don't see myself writing my own custom elements. But this did help me better understand what's going on under the hood in Vue. And that makes it easier to use and, undoubtedly, I'll make better use of what Vue can do. The slot feature won't seem like a mystery in a black box now.
Great video thanks! I've been using web components for the past three years and I absolutely love them.Much easier to work with than React. I'm never going back.
Great overview! I feel like I understand the shadowDOM a lot better now.
Great tutorial on Web Component!
Most frontend developers have only heard of web component but have no experience with it.
I often hear people talking about Rust and web component together, can Kyle introduce the connection between these two things? That would be so cool!
Nice video. Thanks for making these.
I have never disliked a WDS video until this one, and it's only because of the click bait. You're better than that, Kyle.
I'll continue upvoting all your other vids that don't resort to click bait.
React is overcomplicated and this provides the control I want. this is super cool
edit: I am never touching React again
you just dont understand react
@@winzyl9546 Now I am in a point in my programming career where I might never touch a front-end framework anymore. To be honest, yes. I do not understand React but now I don't have to.
I've been getting into WASM a lot lately and self contained components are amazing to use with the blazor implementation. I think this is the future of web development. The concepts are tricky though and I, like others need some time to absorb it.
All the pros seem to be talking about it these days. "Don't forget Rust."
Very Nice informative video my friend.
I use web components almost 2 years for building Design Systems that are agnostic of the JS framework that are going to be used. Web components are feature proof because is plain JS and CSS. To build my components I use StencilJS that is a compiler that uses Typescript and JSX and in my humble opinion is superior than Lit Html.
Thanks a lot Kyle on this video about web components. It turns out that web components can actually be shared between different frameworks (React, Vue, Angular, Svelte?) so this is one big reason to learn about them. Although TBH, this video does make me appreciate how much React has simplified building components, seeing as the class-based API for web components can be really verbose.
Honestly after looking at this I can say that it is better this way than too simple way. The biggest problem with react is that it do too much behind a scenes and if you don't know it too well you will make mistakes and wont understand how some things got work until you spend a lot of time with a framework and not just keep repeating mistakes, but learn new things and how better to write code with it, which becoming in the end a lot of time consuming task.
But what about your recommendations for when to choose Web Components over typical frameworks?
Why this coding youtubers using clickbait. End of react?? Seriously.
Bro he added "?" In thumbnail, he's bot saying he's asking, it's not that of a clickbait
@@anshulanand02 it's still clickbait via insinuation
Id be more Concerned shady TH-camrs pedaling ai gonna replace u bullshit trend.
@@anshulanand02 So can i publish a vid with "US president died today?" And a thumbnail of biden with a cross on him and gain millions of views and lots of money? Is that fair? Isn't it clickbait?
Everyone does this its not that serious. You knew it was bait when you read it but clicked anyway
When I was at a full-stack bootcamp, one of my teachers who was a real smart guy from MIT was basically trashing on React. He said that web components and things like the shadow DOM already make your website fast, and that React was unnecessary for this (granted he still had to teach it to us). Ever since then, I've been super curious to see if it's really true. I wonder if someone can make two identical sites with React vs. Web Components & Shadow DOm, and see which ones faster.
Many developers prefer to use frameworks like React or Vue because they provide a higher level of abstraction and a more opinionated way of building web applications. Additionally, React and Vue have large and active communities, which provides a wealth of resources and support for developers. One of the main disadvantages of web components is that they are implemented using classes, which may not align with a developer's preferred programming paradigm or style. Classes in JavaScript are a relatively new feature and some developers may be more comfortable using a functional approach. React and Vue both provide a functional approach to building web applications. React's components are implemented as functions and Vue's single-file components can be implemented either in class or functional way, so if you are more comfortable with functional approach, you can use frameworks like React or Vue, which provide a functional way of building web components.
Yes, I agree about the frameworks. I do think they handle a lot of these "behind the scenes" scenarios so I don't have to. Not all the funky ins and outs are handled by every browser and the fact that the different frameworks implement the same thing differently shows that the approach is far from obvious. Frameworks are a good way of piggy-backing on the expertise of others and to use the new features without having to rewrite the application business level code. As I was watching this video I did occasionally think "I wonder if that is how Svelte does that?". Sure, you give up a bit in terms of absolute flexibility, but even that is not necessarily a bad thing ("style guides" vs "fantastic innovation - what do you want in your UI?).
Selecting and customising components shouldn't be an every day task. Once you have them set up devs should be using them no re-writing them for every page. The aesthetic of consistency should be paramount.
The sparkle of OOP tarnishes when it hits the real world. With the addition of classes, Javascript is evolving from a Poor man's Lisp to Poor man's Java - not a step forward. I'd rather see the world move from OOP to Functional than the other way around. But as with evolution where Platipus and Coelacanth are still perfectly evolved for their niches, perhaps JS is destined to have some dead-end variants.
How useful is Web Components? Usually modern day in industry the challenge we face is moving away from old front end frameworks to a newer one while still supporting the legacy applications.
It would be great if we could have web components built in react that can have their own styles which are then embedded into legacy applications which allows for seamless transition from older to new framework.
nice overview of how these beasts work. 👍🏻 A bit more about scoped styles would've been nice.
The "expandable-list" however is essentially + just lacking all their native features and accessibility stuff thereby demonstrating that it's often a really bad idea to recreate any interactive native HTML element from scratch.
It's usually the lack of keyboard support, ARIA, and the presumtion that everyone is using a "fine pointer device" (mouse) with a scroll wheel.
I think something is missing from the video: emitting events from web components so you can addEventListener on your custom todo-item, to know when the user ticks/unticks them. Do you just bubble up the events through attributes like ... and this.addEventListener('change', (e) => this.onChange(e))... or something like that?
Please make a one hour video on NEXT js .
It would be a great favor Kyle 🌚
Watch the Net Ninja
@@mauro21523 Brother, Kyle has just another level of explaining stuff that I love. Net Ninja is a great instructor too. Thanks
Does this javascript have to be shipped out to the browser or is the underlying DOM composed finally of "standard" HTML? I ask this because it has implications on server side rendering versus sending pages as a more front-end heavy single page app.
Do you need the outer wrapping span around the slot if it is anyways going to replace the slot with span coming in?
Great video, thank you
Great work!
I started react today 😄
Same here im at beginning stage, and we see videos like this😶 demoralizing me
@@chhavimanichoubey9437 same
Don't fall for clickbait videos that make money off adsense- react is not going anywhere.
Keep going…
@@chhavimanichoubey9437 Just use React
Web components have been the future since 2015, I’m amazed people isn’t using them. WC are based on web standards which won’t change depending on the framework you use, react/angular/vue standards change from versión to version, but WC don’t.
The learning curve is a bit more challenging. But man the re-usability is endless.
You can have an input-core component with tons of custom features/events/attribute and simply when you need it import it, but if you need specific things but not necessary to change the input-core wc you simply extend the input-core and make a new one with the benefits of the base class and the benefits of the new implementations without losing time
Ah ty for specifically mentioning inheritance. So you have implemented this DRY approach with web components? Any gotchas or tips/vids regarding this specifically? All I seem to find is using Lit/Stencil which seems to defeat the non-framework approach.
Slot is not bad. However, instead of extending UL element, I'd rather create a button with down arrow in DOM directly.
Where did you copy those styles from 19:37
I'm less than 2 minutes in and Shadow Dom appears. Damn, I better go and look that up.
I too am ready to jump on that Shadow Dom. I've heard of it but I wasn't really sure what it was...
Why do you do the updateStyles in the connected versus constructor? What's the difference?
The thumbnail of this video is going get an heart attack in react developers heart'😅
my man cut into his own sentence in the start lmao
As is the custom "todo-item" checkbox will not be part of any form submit.
Why ? Because the shadow DOM hide the checkbox from any parent form.
To avoid this your custom element must either extend FormElement instead of HTMLElement or set the static "formAssociated" value to true.
Like Kyle did for the "checked" style, your custom element should also mimic and propagate the behavior of the parent form element regarding state|value change, reset, validation ("pattern" property and :valid :invalid pseudoclasses for styling) and autocompletion ("list" property).
The input may also act like a form element without extending FormElement by altering the formdata value generated on form submit. I don't like this idea because it implies that a custom component may spy formdata submits without being visible in the DOM (so could read or alter value from other fields of the formdata....).
great job 👏
Web Components + Zustand = ❤
Is that part of under the hood of Angular?
Exactly
This is both amazing and very cumbersome compared to something like Vue .. which is why I wont use it unless it is absolutely necessary.
But awesome job with the video, if I ever need it I am sure I watch it again :D
it's worth giving a shot on smaller projects. Even better if using a web-components based framework like Enhanced or WebC. I know it's another framework, but it's much more future proof
This is really cool! Thank you for pointing it out. I agree that it could happen that we no longer need libraries for most of these things. It's similar to how it was only through Bootstrap that you could easily make Grids and Flex but now it's something in most browsers. 👍
This is awesome, thanks!
web dev as usual with the best content, that can teach us about shadow dom faster than any other course, thank you for your hard work.
If my development skills are awesome is because of this legend!
😜
You can import css from external file with type assertions and use components js native constructor instead plain html with innerHTML (its a bad practice btw)
Explain more pls
you are one of the best front-end TH-cam, if not the best. do you seriously need a clickbait?
It's refreshing to write code directly against the web browser's API using current web standards instead of being limited to calling an opinionated library/framework.
which keyboard you are using?
Keeping shadow root closed, Will the componemt render in UI?
What would advance styling look like for these custom elements? For example, in the various websites where this could be used, the projects might use bootstrap, materialUi, etc.
Great video mate. Fairly new to web dev so possibly a silly question. could these be used a bit like handlebars templates to include global nav and footer elements etc?
Is there a way to get syntax highlighter and completion on the HTML template? Passing string for the HTML and style doesn't seem scalable. I'm spoiled by typescript and vscode extension.
es6-string-html
As a big fan of Web Components, I would like to hear from the other side, How a front-end framework might be better. And leave out the fluff about community and a few less lines. I want to know about features provided.
In the past, I have used the pre-TS version of Angular for about a year, JQuery for longer, and Vue for a few months. Using Django now on a project, but that's a back-end framework, not a front-end framework. Looking back, I would not return to any of the 3. Learning JQuery felt like a complete waste, since it provided nothing over Vanilla JS. Both Angular and Vue left me addressing bugs that were not mine, and I felt mostly addressed issues I didn't care about.. Only thing I liked about those 2 were how templating worked, but I was easily able to make my own JS code to mimic what I liked about templates. I also liked how Vue used fewer files than something like React, but WC's also uses just 1 file.
I'd love to see a first reaction video to Svelte.
Do you have video for advance concepts in web component
come on man, don't go there please, you're one of the best guys doing tutorials about dev. end of react? react killed by web components? man you don't need clickbaits..you're better than that ;)
and web components are shit, maybe the title should be: an easier and simplified way of creating web apps using web components..
I'll hit the like button out of respect, but please don't go there
I just discovered that Web Components are a thing but at the end it looks a lot like a VueJs component (with slots, scoped styling etc) except it seems to be a bit more tedious.
I think it can be nice for smaller projects and to grasp the components usage
I am interested with web component but too lazy to explore.. thanks for this video..
I’d really like to see a web component button integrated into React. Like, how would you call onClick with a custom element and would there need to be something special within the web component to register that something in the virtual dom was clicked.
It's unclear to me why everyone considers React as the only true way to create SPA. React's only (in my opinion) advantage is a large community and lots of additional tools, but that's rather the result of coincidence (React won the lottery somehow). Web Components is a great vanilla way to create SPAs, lightweight and fast. I disagree with previous comments that clickbait is irrelevant here, good job, it's time to adapt to new technologies, sooner is better. Thanks for great video!
maybe helpful for vanilla js project. if you have already adopted React or other frameworks which support component, this looks too complex to be integrated.
So this is how I define the component, how to get in on the page and how to interact with it from the HTML side. Great.
But the interesting stuff is still a mystery. How do I get multiple components to interact with each other? Maybe one component is a custom sortable table and with a second component a user can filter the data inside the table. And maybe a third component for the pagination of a large dataset shown in the table.
All of these components have to talk to each other and use the dataset, probably stored in a javascript array. But how? Any chance for an equally enlightening follow up video?
Here are some common ways to send data to a WC. Method calls, attribute changes, and Custom Events. I find Custom Events to be the most useful of the 3, since you can attach data with it and bubble it up only as far as you want to. Working with nested components is when WC's starts to get exciting.
To get them on a page is as simple as placing any other tag on an HTML page. They act and respond like any other HTML element. But since a script drives them, they don't change until that script is loaded. Until the script changes them, they appear as normal DIV tags. Whatever is inside the tag, before the script is loaded, is called the Light Dom. In this way, something does show before the script loads, and not just a blank.
Hope this helps. :)
Because React is too bloated and web components are often enough, Lego JS came out. We've been using it for years now and it solved ALL our issues (easy to maintain, native -> fully compatible, no learning curve).
It give the web component the little extra skin to update, use conditions and loops for display. That's pretty much everything we need when developing even massive apps.
looks cool but it depends on whether we need to do it that way or not, else I would go for react
Certainly need a tutorial on lit element with javascript & its benefits over vanilla web components & server side rendering supports, declarative shadow dom
How could we do state management across multiple web components without any libraries? Can that be the next video?
From my experience, the best way to manage state with multiple WC's is custom events. It's really up to the developer, since you can also call methods on them or listen for attribute changes. But with custom events, you can decide if you just want to bubble up to the parent, or all the way out to the root. In addition, custom events let you carry whatever information you want.
@@gm770 Thanks! Been trying to search for this since watching the video and not a lot of people seem to be talking about it. I think I was overcomplicating it in my head, so your comment is definitely helpful.
Glad to help. Been using Web Components for about a year now, and continue to be impressed how well they work when you start nesting components. Works exactly as you expect it to, no hassle, and great support in Chrome Dev Tools.
There are multiple ways to manage state you can even do it with pure CSS
I actually tried to implement web components, but when you have to deal with data heavy applications i find web components quite a pain to hydrade, pass props, share data from child components to components up the tree and so on... They are just so barebones. i ended up replacing them with Vue
How to hydrade, pass props and share data is exactly what I was wondering about watching this. Any tips for good documentation or tutorials besides MDN?
@@chrishuhn5065 actually. Nope, i had to read the MDN WC documentation and understad whats up.. the thing is that WC dont bring reactivity to the table. So you still need to use (all be it, better separated) MVC pattern. And i never could get slots to work, so i could not have custom data inside my WC.... So totally discarted them. They are waaaaayy to bare to be functional for me for a real project. Unless you take the time to write a wrapper class that give a better DX for WC... they are not ergnocomic AT ALL
@@chrishuhn5065 also to hydrate them and pass props you have to do this ugly thing where you pass to the web component a data propert like lest say "my-data" in the web component class register that property, set up getters and setters serialiase the input of that prop. Kf you wanted to pass and object or an array. Welp, you had to serialize it as JSON then de serialize it inside the getter of that property for later use
@@fueledbycoffee583 Thank you. It looks like it's as bad as I had feared it would be.
This is somewhat nice, but oh dear god I can see the next issues arise.
Naming your components in such ways that they do not create issues with other components and technologies used.
Absolutely agree with the thumbnail. When I first heard of web frameworks, I delved a bit into React and Vue. They are the most popular and they have so many goodies for them, as well as good documentation. I quickly realised, they are not exactly frameworks, the way they are built, they are like a totally new language paradigm, they prevent you from using JS and web APIs, or any other web standards, you can only do stuff their way. That's not a framework really, that's like a restrictive layer on top of the web, and a bossy one at that. It's their way only. If React can't do it, you can't either. You can't just use JS, you'd have to wait for future "features". And that's not gonna fly with the speed the web is advancing, or with the upcoming technologies, like WASM etc. In fact, I predict all those "frameworks" like React are gonna die the moment WASM becomes usable and stable. Anyway, good web frameworks are probably those that help you using abstractions, while they still allow you to use JS and any other web API or tech you want, they do not get in your way, and they themselves are based on web tech without braking any standard. I think frameworks like Lit, Stencil, or similar, using web components etc are the good ones. React and Vue redefined what web components are, and they even went further reinventing their own virtual DOM, when a shadow DOM already exists as a web standard. If you don't like web components, there are a few other minimal ones like Alpine or HTMX using different techniques that also don't get in your way. React sucks people, don't use it, don't invest on it, it's gonna die. The only people who would end up still using it are those who invested too much into it and are locked in.
hi is there a way to map the shadow dom using Array?
I like the video, just don't like the clickbait in the thumbnail, no need.
About web components it's very important to show and understand the basics, but for those who might be thinking that this is so much boilerplate or hard to do simple things, yes in raw way it is, but as a web standard you can't have only one option to do things, normally they try to make it customizable and flexible for us developers create tools build on top of it. That said, I recommend creating an abstraction based on HTMLElement, it can be a class and in it you can create things like automatic rendering based on the return of a render method and the same with styles. Create or use a template string to make writing html easier and so on. For example, the Lit framework does things like I said, but you can create your own
it would be good to write ui library that could be use in different framework, but i can't replace react or angular like frameworks
Hi Kyle!
Would you like to guide us about Speech to text APIs?
Please think about it.
I like to watch your great instructional videos. So please, so not fall into sensational titles and empty content bullshit like many other channels do (not related with web development).
You don’t need this to grab views.
Keep up the good work.
@WebDevSimplified Excellent video! Can you do a deep dive on js classes for your next one?