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
✅ Dave's site: daverupert.com/
✅ Dave's Web Components Guidebook: htmlwithsuperpowers.netlify.app/
✅ Dave's Frontend Masters course on Web Components: frontendmasters.com/courses/w...
✅ Dave's Twitter: davatron5000?lang=en
✅ ShopTalk Show: shoptalkshow.com/
#css #webcomponents
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
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

[@mateus.duraes]

Muito massa Adriano! At the company I work we're also using webcomponents for many different cases, one of them is to enable different teams to bring some small pieces of UI into a legacy app. Once this legacy app is migrated to a modern tech stack, we can still use the same webcomponents. Sometimes it seems webcomponent are a forgotten technology, however, It is really cool to see that there are a lot of people happy about using webcomponents

[@DaviAreias]

Tambem curto muito

[@NosherwanGhazanfar]

I am looking for a reactive state management solution for native web components, I have seen people using JS proxy objects for this, what are your thoughts on this?

[@NosherwanGhazanfar]

@@mateus.duraes what are you using for reactive state management with native web components?

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

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

[@hexerei02021]

Why not just build the components with some JS framework? To me Web Components seem like a lot more work.

[@Dorchwoods]

@@hexerei02021 because we have a lot of product teams on various tech stacks, some stacks as old as 2004. We have teams using react, angularJS, angular, blazor, and svelte, all using the same web components now. They work well in any framework.

[@christiannies3822]

@@hexerei02021 Frameworks come and go. But the nice thing is, that, once you define and communicate the boundaries of “what is the scope and purpose”, you can simply use web components in any frameworks, so you gain resilience, interoperability. Once you need to switch your framework, you can still use the components :)

[@gm770]

All the JS frameworks as well as Typescript produce what? They all produce JS. The Frameworks give you a bunch of wrapper code and a compile step, to do what you can do natively, with only a little bit more code. At this point, I see it from the other side. What does adding a framework provide for me, that I need and can't easily get natively? I have yet to get a good answer. The best answer I got, was that a framework forces a structure, which can help get people of different skill sets on the same page. It's not a horrible reason, but not good enough for me for the overhead.

[@theyreMineralsMarie]

So these web components you've created are shared across web applications? How does this work?

[@gm770]

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.

[@alext5497]

Is this different from nested react components. I don't see the difference re nce but I've only had time to catch a fraction of this talk

[@gm770]

With Web Components there is no defined way of communication. It's up to the developer. This gives you many options. Here's some basic ones. You can track Attributes, and be responsive when they change. You can create methods to call, since any Element can have methods. The one I use the most is custom events, since they can bubble out as far as you need them to, and carry whatever information you want.

[@craigwebb3056]

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.

[@eddieshanower7902]

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

[@soultouchingsongs]

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

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

[@subhasrini2706]

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

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

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

[@iamreg1965]

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.

[@jame_sta]

Garbage bloatware frameworks, trust me, you don't want to use them. LOL. Vanilla HTML/CSS/JS is and will always be the best outcome.

[@sovereignlivingsoul]

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

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

[@corndoggydogdog]

Loved this ❤❤

[@benlierman7038]

Nice job!

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

[@nikhiltyagi6619]

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

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

[@DanielBrownsan]

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

[@peteharrison3241]

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

[@dontaskiwasbored2008]

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

[@gm770]

No you can not go full dirty. Injecting CSS is a bit tricky and takes some practice. A WebComponent follows 2 styles. Whatever affects the shell of the WC, and whatever style you make for your Shadow Dom. The ShadowDom allows inherits in as well as Custom Variables. Custom Variables is the best way to go, if you want CSS injected from outside the WC. As for the shell, it's best to stick to just positioning CSS, and leave all the decorating and local positioning to the shadow css. Also if you need to share CSS, you can use a Link tag in the shadow dom to import a css file.

[@rickardelimaa]

Yes, you can do this (if shadow dom mode is open, which it should be), but you need to do a recursive loop in order for it to work. It's not how you should do it, but instead using _import_ to add javascript and CSS (CSS import isn't that supported yet).

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

[@user-ni7ct5vr8u]

I came down to the comments to see if anyone else was as confused as I am. Luckily I wasn't alone.

[@dontaskiwasbored2008]

This is more of an exploratory stream that introduces and covers a lot of subtopics related to web components. It's not a tutorial. It was clearly never meant to be a 'you walk away knowing web components' thing. It's like the first couple days of a class. You're getting what the thing is and how it works, not how to do it.

[@user-ni7ct5vr8u]

@@dontaskiwasbored2008 doesn't matter what it was supposed to be when it's just confusing. Dave just isn't good at explaining and his telling is a mess. He's probably good at other things (obviously) but not making these kinds of videos.

[@ynotpeanutbutter]

I'm 40 minutes in, and still have no clue what the video is about.

[@CyberTechBits]

@@dontaskiwasbored2008 it doesn't give you a clear definition of web components or even a good use case

[@GR_BackingTracks]

2:53 weBegin

[@chrishuhn5065]

In medias res @ 06:30

[@EpicGamer-ny1fu]

there is no reason to need a library web components are straight forward enough without them.

[@nitsanbh]

Video starts @ 2:50

[@zackplauche]

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.

[@amigaworkbench720]

No. FFS is it so hard to implement something like this into HTML standard: component: .hello{} function hello(){ console.log("hello"); } in the main page this would just write content of component if imported: JS has grown into layered mess over these long years with horrible hackish frameworks. Why can't proper language (like dart) be properly integrated into browsers?

[@user943fd43jfkdlsajf]

1st.

[@user-sz8pz2ow8d]

Great. Thanks. But… to much like in this video)))

[@daniel-deverell]

Rupert was obviously unprepared for this call. The weak adhoc examples were hard to see past.

[@a.galvaop.787]

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

[@proteus1]

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.

[@Gregorius421]

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.