Creating Web Components - With Special Guest Dave Rupert!

I know basically nothing about web components, so Dave Rupert is joining me to teach me all about how they work!

🔗 Links

#css #webcomponents

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[CalvinMCole]

What is a web component? 4:15

Styling Web Components Example 12:45

HTML with Superpowers 15:12

Standalone Components 28:12

Piercing ShadowDOM 35:16

A different mindset 1:01:28

Questions, etc. 1:06:00

[shimonoe]

Web Components are AMAZING! I work at a startup that creates Design Systems for big companies in Brazil. We used Lit to create core components libraries and distributed for many teams to work with React, Angular and Vue.

Using Shadow DOM to leverage Design Team decisions and prevent teams from heavy customization on UI components grants more consistency across products.

It's a bit confusing at first because we trend to work very close to W3C definitions on Web Standards, but when you get used to is very pleasant to code on this logic

[Dorchwoods]

My company gave us the go ahead to build our design system with web components and it was the greatest decision we've made. As a maintainer of the components and the design system docs, I've noticed a significant increase in productivity and consistency. We have about 5, 500 employees, hundreds and hundreds of applications, all built in various tech stacks. Web components was the no brainier solution for us to build consistent UIs across the company. 🙏🙌🙌

[ofeenee]

The reason why the custom element didn’t pick up the --buttonBg variable is because the css selector was wrong. The custom element is defined as “example-element” and he was targeting “custom-element” instead.

[craigwebb]

This was GREAT! I've followed Dave Rupert for years on Twitter but I've never seen him for realz. Kevin Powell does a great interview here and gets the basics of web components out so we can understand the basic gist. I definitely want to try building some web components. The details about getting styles to work is a bit murky. When I watch again I will take notes.

[gm]

I have been building my own WebComponents for about a year now, and I have never looked back. Dave's description is like my own, it's similar to the old JQuery component, but native and better IMO. I use the native way to build them, so no libraries like Lit. Figuring out how to get data in and out of them is the only tricky thing to learn, but after you do and get into nested WebComponents a lot of possibilities open up. My favorite part is the local scope, since this allows you to re-use names for IDs or JS variables, without issues even on a large project. They also scale well, and are easy to debug.

[chrisbolson]

I must admit that I wasn't aware of the possibilities of web components. Thanks to this video I am going to take a fresh look at one of my projects to see if it can be adapted as web components seems ideally suited to it. It could resolve a couple of the issues I am having especially as regards the external CSS is affecting the design.

[iamreg]

I've been building Vanilla web components for over 3 years now, and now that the ElementInternals functionality is pretty much universally implemented one can build custom elements that seemlessly participate in form membership, validation and submission, with no additional overhead. The future is already here.
Never used React, Angular or anything like that in my life.

[subhasrini]

Congrats Kevin you have made to a 700K audience! Trust me you're more than that!

[CyberTechBits]

Gotta be honest. I would like you @KevinPowell to do your own tutorial on components. I couldn't understand Dave Rupert at all...he was all over the place. Maybe he gets it, but I think he probably confused a lot of folks. But, I still give you a thumbs up because I love your content and how you structure and break things down easily. Thanks!

[nikhiltyagi]

Please kevin do a video with you trying it out from scratch building a webpage.

[eddieshanower]

Kevin is amazing. Such great content and such a great teacher. Dave was awesome too. Thanks for helping along my journey Kevin!

[LivingRegiment]

I shared this with a coworker, and we will definitely try out Web Components in the future. I love the egg analogy where an egg contains and protects its contents. I work in an environment where Angular is our front end, and it took me a while to realize that components are somewhat isolated, especially in how it styles unless you define it in its own component. We have used Stencil a few times, but I still need to fully understand how to use it, but this video helps a ton. Thanks again for the great content!

[rickardelimaa]

One huge downside with shadow dom is that password handlers can't find inputs in shadow dom (yet). We had to add username and password inputs outside shadow dom, and queryselect them from our login component.

[soultouchingsongs]

You explained it so well. Thanks Dave for sharing 🙏 thank you Kevin for bringing Dave in🙌

[DanielBrownsan]

The word "like" appears 888 times in this video.

[jame_sta]

No need for BEM/BEMIT...etc naming conventions when you have W3C WebComponents :) You can package up webcomponents in their own folder containing its index.html, index.css, index.js and use those components across different projects. You could even pull it into React/Angular..etc and use them there. You can't do that with React/Angular/Vue components and sharing them between different frameworks/libraries.

Native HTML5, CSS3 & JavaScript/WebComponents is extremely powerful.

[briankgarland]

The Astro comparison seemed to be spot on. Isn't this just like creating a component in Astro? The difference being that you don't need a framework working behind the scenes.

[nomadshiba]

i have made a my own library for building user interfaces using web-components
im pretty happy about it atm, thinking about using it in some personal projects, when its a bit more solid

[peteharrison]

having just commented on another of your videos regarding the form validation in css, maybe this is the way to componentize something for reuse