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

@ZhuJo99

Жыл бұрын

Exactly!

@dannbrown

Жыл бұрын

I agree...

@MelodyBeats.

Жыл бұрын

Agree

@air_kene3419

Жыл бұрын

I was looking for this exact comment!

@wiseman9960

Жыл бұрын

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

8 ай бұрын

This is the mindset to have, it's a great opportunity to learn something new

@VisualArtRonny

5 ай бұрын

Nice, I love those things too, they're my main occupation :)

@switchlyrics.

4 ай бұрын

Our company also use that

@nix7705

3 ай бұрын

​@@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

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!

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!

@CirTap

Жыл бұрын

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 :)

@zyriab5797

5 ай бұрын

You can even import your CSS in JS files with "CSS Module Scripts", it's basically a ES-style import for CSS files :)

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.

Great video and great timing - I have just spent the afternoon converting one of my projects into a web component.

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!

@orionh5535

Жыл бұрын

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.

@subhasrini2706

Жыл бұрын

Same here👋

@user-fr2fm3ri3w

Жыл бұрын

@@orionh5535 Seo is a myth it’s not 2007 anymore

@nemanjatrivic9505

Жыл бұрын

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

Жыл бұрын

Can you give any examples of a large app that uses that stack?

@Kiev-en-3-jours

Жыл бұрын

@@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.

@AgentZeroNine1

Жыл бұрын

@@konfcyus4865 Adobe Photoshop for the Web, ING bank, GitHub, some of Reddit, etc etc etc.

@konfcyus4865

Жыл бұрын

@@Kiev-en-3-jours 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.

@trappedcat3615

Жыл бұрын

@@konfcyus4865 Why does the app need to be large? What does that imply or tell you about using the web spec.

Unbelievable content! Kyle has way of making complex concepts clear.

Wow that is a lot of power and awesomeness right out of the box. Awesome videos.

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!

Great new thing I learned today now I can create my own tags ,etc it's very helpful!

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

@ibgib

Жыл бұрын

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.

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.

Great overview! I feel like I understand the shadowDOM a lot better now.

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 :)

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?

Another minor tip: VS Code has an extension for syntax highlighting HTML or CSS template strings.

@nbbhaskar3294

Жыл бұрын

@Julio Caesar es6-string-html

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.

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.

All your videos are simply brilliant. Love your channel.

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.

@trappedcat3615

Жыл бұрын

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.

@plopplok9461

Жыл бұрын

@@trappedcat3615 lit is based on polymer that was the prototype for the w3c for web component.

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.

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. 👍

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.

@XCanG

Жыл бұрын

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.

Certainly need a tutorial on lit element with javascript & its benefits over vanilla web components & server side rendering supports, declarative shadow dom

I know lightning web components and always wanted to learn web components. Thank you!

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 tutorial on Web Components. Thank you!

This guy is the Andrew Kramer of the coding world. Clear, concise and explains the things that people may commonly not know.

@WebDevSimplified Excellent video! Can you do a deep dive on js classes for your next one?

I use this to build amazing many companents. Web components so awesome

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

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'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.

@abrotherinchrist

Жыл бұрын

All the pros seem to be talking about it these days. "Don't forget Rust."

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.

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.

This is awesome, thanks!

But what about your recommendations for when to choose Web Components over typical frameworks?

This is gold. These web components are being used in Lightning Web Components in Salesforce

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.

Great work!

Nice video. Thanks for making these.

I'm less than 2 minutes in and Shadow Dom appears. Damn, I better go and look that up.

@bobdinitto

Жыл бұрын

I too am ready to jump on that Shadow Dom. I've heard of it but I wasn't really sure what it was...

The thumbnail of this video is going get an heart attack in react developers heart'😅

Slot is not bad. However, instead of extending UL element, I'd rather create a button with down arrow in DOM directly.

Man respect your audience feeling! End of react, I just started learning it 😂

Great video, thank you

Please make a one hour video on NEXT js . It would be a great favor Kyle 🌚

@mauro21523

Жыл бұрын

Watch the Net Ninja

@gmd2171

Жыл бұрын

@@mauro21523 Brother, Kyle has just another level of explaining stuff that I love. Net Ninja is a great instructor too. Thanks

looks cool but it depends on whether we need to do it that way or not, else I would go for react

I'm still a novice. Just when I think I can see the bottom of the rabbit hole, I find out the bottom I thought I saw is really a turn and hole keeps going.

@abdelrahman6319

Жыл бұрын

Don't get distracted by clickbaits, technologies don't go and disappear in a blink of an eye. In addition, react popularity is currently increasing and hasn't reached its peak yet. So stay calm and learn what you are learning

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

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 job 👏

my man cut into his own sentence in the start lmao

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?

Very Nice informative video my friend.

Do you need the outer wrapping span around the slot if it is anyways going to replace the slot with span coming in?

The best channel in youtube!

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

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....).

Hi Kyle! Would you like to guide us about Speech to text APIs? Please think about it.

20:22 Haven't you introduced an accessibility problem by appending a button element as a direct child of the UL? is invalid HTML.

@Greg8872

Жыл бұрын

And also later on when doing sample of the nested list, shouldn't that whole second UL be instide a as well

@nullternative

Жыл бұрын

Fellers... hope the point of the video wasn't missed.

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)

@Scuffy

Жыл бұрын

Explain more pls

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.

React is overcomplicated and this provides the control I want. this is super cool edit: I am never touching React again

@winzyl9546

8 ай бұрын

you just dont understand react

@yolkyhorizon

8 ай бұрын

@@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'd love to see a first reaction video to Svelte.

I am interested with web component but too lazy to explore.. thanks for this video..

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! 😜

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.

Why do you do the updateStyles in the connected versus constructor? What's the difference?

I would like a tutorial on next js

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.

@thecoolnewsguy

Жыл бұрын

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.

End of react? I haven't learn it yet. 🤣

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.

@outwithrealitytoo

Жыл бұрын

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.

i think this include much more js and html n CSS that is why libraries and framework come into play, but in future these web component will grow because their native behavior

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

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

@chrishuhn5065

Жыл бұрын

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?

@fueledbycoffee583

Жыл бұрын

@@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

@fueledbycoffee583

Жыл бұрын

@@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

@chrishuhn5065

Жыл бұрын

@@fueledbycoffee583 Thank you. It looks like it's as bad as I had feared it would be.

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.

hi is there a way to map the shadow dom using Array?

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.

I started react today 😄

@chhavimanichoubey9437

Жыл бұрын

Same here im at beginning stage, and we see videos like this😶 demoralizing me

@MahBor

Жыл бұрын

@@chhavimanichoubey9437 same

@compton8301

Жыл бұрын

Don't fall for clickbait videos that make money off adsense- react is not going anywhere.

@muhammadnishad.p.n1170

Жыл бұрын

Keep going…

@Harmxn

Жыл бұрын

@@chhavimanichoubey9437 Just use React

Do you have video for advance concepts in web component

could you make the left part of the screen larger to let people watch this on phones, and the right part dark, so it wouldn’t burn your right eye when watchinng in the evening )

How could we do state management across multiple web components without any libraries? Can that be the next video?

@gm770

Жыл бұрын

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.

@bluecaret

Жыл бұрын

@@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.

@gm770

Жыл бұрын

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.

@DaviAreias

Жыл бұрын

There are multiple ways to manage state you can even do it with pure CSS

It’s a bit tedious because of the imperative api. Maybe if someone creates a declarative api for this and also, what about performance?

which keyboard you are using?

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.

We still need a spa framework for single page routing.

@gm770

Жыл бұрын

Keep in mind that ALL js frameworks, render into plain Javascript. Routing is done with the History API, in combination with navigation actions.

@sanjarcode

Жыл бұрын

Don't think so. For example, React Router is a wrapper over history API. We can write ourself, maybe use the same interface as React Router. Bet someone's already done it.

Keeping shadow root closed, Will the componemt render in UI?

Thanks

Where did you copy those styles from 19:37

Is that part of under the hood of Angular?

@thecoolnewsguy

Жыл бұрын

Exactly

Vue also has named/custom slots

I just learned it 🐸

Let's do this

Please make video on next js aslo we have react so i don't wanna do anything with web components

@Almighty_Flat_Earth

Жыл бұрын

React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated. Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening. Svelte and react have confusing code. Developer experience matters.

finally!!!!

Can you do a capacitor video? So we can write Android app with react?

@Zagoorland

Жыл бұрын

Video about React Native and EXPO seems like a better idea