Creating Web Components - With Special Guest Dave Rupert!

Loved this ❤❤

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.

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

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

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

Since you mentioned Astro - You can write webcomponents in .astro files. They have a section on it in their docs.

excellent video, thank you both, i am liking the concept of web components, i started working on a couple different ones, with ideas for more, styling can be tricky, working on a couple of variations for it, when building a web component is it possible to build two different types of web components in the same js file, i have had issues with the template being loaded multiple times causing issues with being able to display the component and when i try to put them in the same file i get similar issues

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.

Web Components was and will remain a failure for many years. The design principles followed by the WHATWG are flawed for a declarative language that is HTML due to the lack of the necessary software engineering competences in the standard's editing community.

Dave... I can't like it anymore.

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.

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

Nice job!

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

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.

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.

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.

Can you just build one from scratch so we know how to use it, and maybe add timestamps to see where the actual useful content is lmao. I saw him using some thing called web components and got bored while fast forwarding to find the useful bits. I gave up at the 42 min mark.

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.

Upload should have been much better with clarity as your other uploads and clearer and more concise. This video could have been down to 25mins easily. Very disappointed.

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

Can you still go full dirty and use the parent DOM to access the shadow DOM to inject styles and scripts into the custom element? I used to do this to iframes occaisionally when I worked for a marketing company, when the 'app' I wanted to embed did not allow the level of customization the client wanted.

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

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.

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. 🙏🙌🙌

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!

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!

1st.