 Hello everyone and welcome to a live stream. It's been a little while since I've been here and I as you can see I have a special guest with me Dave Rupert. Hi Thanks for having me. It's exciting to be here on the famous Kevin Powell live stream So as usual with these I don't do them often enough, so please let me know how the audio levels are and everything For those of you in the chat and just a big thank you to everyone who's who's come in to join us To talk about this and we're gonna be the reason I have Dave coming on to join me today is because we're gonna be talking about web Components, which is something that has I've been curious about for a really long time now I keep hearing about them in different times and I know sort of their purpose but I don't really know much as beyond that and I'm really curious to learn more and Dave seems to know a thing or two about them But before we get into all of that first, maybe Dave you could just let people know a little bit about you Yeah, hi, I'm Dave Rupert. I am a developer. I live in Austin, Texas I'm also the co-host of the shop talk show with Chris Coyer for formerly of CSS tricks and codepin He's with codepin formally CSS tricks and yeah, we I we've been doing that for No, I know this answer 11 years now I think we're on our 11th or 12th year of doing that podcast and And for like 15 years ran an agency with two of my best friends Trent Walden rain ray and we did web design for I don't know large pizza companies large coffee companies Very popular tech magazines and large software companies based out of Redmond. We built websites for them and And yeah, so it was good times But over the last like year or so kind of like stop doing all the client work And I'm starting to work on my own app called Luro, which is a app that helps you build better products Yeah, I was looking at the your website for that and like that sounds like it's gonna be interesting. It's Well, I'm super biased Sorry, I wear every day Super biased, but it I think it's cool. I think it's doesn't Really exist right now. And so I'm very excited for like what it enables Product teams and just even just people working on a website. I mean, I feel like we solve like the one-man show the the lone developer Use case as well as the like I work with 50 people and it's wild. It's Unattainable so I feel like we solve both those use cases at the same time. So Yeah, awesome Exciting and exciting new project. So it's always always fun. Yeah. No, I mean, it's it's cool It's been a big shift, right? Like working on like Websites where it's like whatever the client has, you know, I might be in a legacy Java app on Tuesday I might be on a modern node app on Wednesday might be on my own thing on Thursday and and like now I'm doing my own Code every single day I log into the same workspace. It's super different than what it used to be You know where where I was like, I don't I don't know kind of getting slung around from all these different sites So, yeah Yeah, that's awesome. It must be a little bit refreshing being able to sort of just do your own thing a little bit Yeah, no, it's nice. It's it's cool to like, you know, this is but you know, we have customers You got you know, you gotta listen to them. So it's not necessarily your own thing. We're doing it with other people. So Nice, yeah So, yeah, I guess we'll sort of jump into the topic and before we we're gonna sort of work our way through on Web components will build out a web component and stuff like that But I guess before we we look at how we can make one the first question is You know, what what is what is a web component? great question and That question that answer changes from you dear. No the Okay web components itself is a is doesn't exist first thing you need to know it doesn't exist It is actually a collection of specifications that got kind of branded as web components the the four are like the big one is Custom elements, right like the that's kind of the flagship feature. It's like my dash button You know anything with the dash in it is a custom element But and that can be as cool as you want it that can be as micro like my button. I don't know I'm not too enthralled by button components, but You know, or maybe it's like Google dash maps or something like that or code pen dash embed something like that Sort of your own custom element that goes on the page and then the next part is is Template element is sort of like the template specification Which you've maybe seen or used before it's kind of a weird niche thing But basically you can like write template and then write HTML in there and send it down to the page it doesn't render on the page, but you can like grab it from JavaScript and Like clone it or edit it and and there's it's really minor but the benefit of that is Like one superpower I call him but one superpower of that is it gets like parsed. It's like ready to go It's evaluated. It's a little different than like just writing document inner HTML every single time. So it's kind of like It's gonna be a smidge faster. It's a bit more HTML than just writing inner HTML And then there's another element that kind of comes with web components called slot But and that's gets a little more into the shadow DOM stuff, which is kind of the next big part But let me describe shadow dom and I'll describe slot. Does that work? Shadow DOM is the third proposal This is kind of the like This is the biggest footgun for web components It's the biggest like what the what the heck's going on my styles quit working my my script could quit working It can't find this on the page This is shadow DOM and basically the way I describe it is it's like an egg, right? Like you you write an egg around your HTML And nothing goes in and nothing goes out. That's the whole point of an egg shell Prevent the contents from going out There are ways though to like go in like and through an open shadow DOM And we can get into that later But but it's just the idea of like it's encapsulated like you're the code that runs in here Doesn't bleed out over the page in that one thing you could think of it as like an iFrame, you know is like the I don't know. I tweeted once they're like spicy iFrames and They are very much that But but one problem with the iFrame, right? Like you say oh check this iFrame on my pet page, right? It just like goes to like 300 pixels tall, right? Like that's the default Not good. Yeah Shadow DOM is kind of more like a I would call it like a baby web page. It's like its own DOM System and it just renders inside the page as much as it need, you know takes up the height that it needs to render So that's kind of a cool part of Shadow DOM so so yes, then the fourth part is HTML imports, which Mozilla killed on December 15th 2014 I don't want to talk about that too much I'm still bitter but Mozilla killed off HTML imports, which were the best thing and Now it's ECMAScript modules. So yes, I'm import food from bar and the nice thing about that is you can import what? import my button from my button system and Just start using it in your your JavaScript the kind of one cool thing about web components, you know is you can like Import my button from my button component and then you can like rebrand, right? And so you can say like Whatever class Dave's button extends my button and then I can say custom element defined Dave's button as or Dave button as The either the extended Dave button or just my button. So like I can register an element somebody else's element with my name So that's kind of cool Sort of a neat feature of web components a superpower, you might say Of web composes but just imports and exports that's kind of what you need to know if you're getting into the the writing side of things Which the nice thing about webimpose You don't really need to do that like You don't need tools to build. You don't need web packs You don't need any of this stuff in theory in reality. You're probably gonna want some of that but It's and I say it not like when you know how I don't mean to throw people into the bus When you say like react and needs webpack or whatever, you know and people are like, no actually you can do react I create element and bought in this like. Yeah. Yeah. Yeah. No one does People write vanilla web components all the time so like just just Web components that just can run With no tools straight in the browser No, no fuss no mess. I'd like to say so build list is kind of a term that gets thrown around in Very attractive to me. So yeah, definitely. That's that's a nice selling point for sure And definitely you know sort of has some of the appeal of I think or you know the use cases maybe that are used for some of those frameworks and other stuff, but Yeah, yeah, like, you know, I think it It's different, right? It's a little different and I think like even me I've been talking about this for a while, but like I'm starting to understand like the nuances like you can like Punch web components to be exactly like react if you want. Yeah, go for it like With through code all things are possible, you know, if we write enough code give an infinite time and infinite code We can make anything the same But I think like I think there's places where web components are super great And I think there's places where they maybe need some work and need to evolve but that's sort of the thing about web standards is they do evolve and they do get better and Over time and it's like a predictable foundation I don't know if you're caught up in the view to the view three migration like myself, but Well, we're more predictable migration, right, right. Yeah Yeah Awesome, so just really fast for anyone in the chat people might notice it I do have a slow mode on just because it's been my chat gets a little hectic if not And just for today, I just we have a guest on so I won't be spending too much time paying attention to the chat So I do apologize if people have been asking me questions or anything But I am going to start a Q&A right now. I don't know how these work, but apparently Ask any web component questions You might have questions. You might have and we'll see how this works later on but Apparently oh Anything you know what maybe I'll end I was hoping that this could run concurrently to the chat, but apparently it takes over the chat Oh my gosh. Oh wait questions. Oh, no, I I'm not sure how this works Maybe they're both right. I'm gonna leave it running. Apparently. I can also look at live chat If it's causing any problems, I will jump in and take a look Let's see. There's no questions that oh, okay. Good. It looks like it is working and we have live chat going So that's perfect because we are gonna be jumping into the code now So yeah, if it's web component questions, I'll be trying to get them from the Q&A thing However, that works. I'm not 100% sure but hopefully it does collect some questions And in the meantime, I'm gonna switch over to my screen and let Dave start teaching us how we can actually create a web component And at the same time see you know, we'll sort of learn a little bit more about About them along the way and this is what we're going to be starting with right here So do you want to just run through what we're looking at? Yeah, like so this is like you are a popular CSS person So my say even in the state of JS you are So, okay You know, it's it's interesting you said like you don't use web components, right? Are you have very little exposure? Yes, I have something I haven't really dabbled with yeah Okay, cool. Yeah. Well, so this is a page with a web component just with one I wrote called example element, right and so And you know, we can look at the HTML here if I do that it's weird I can control it but you anyway, but So anyway, so you'll see like in my HTML I'm trying to like show the difference here You see like the HTML says regular DOM paragraph regular DOM button, right? So you see the DOM button just like how you write it today, right? And then you have example element, right? And then the the inside thing and this is kind of what I didn't explain about slots But the that's the stuff that you write in between the custom element part. That's called light DOM That's it's a cool term, but it's it's because There's this spec called shadow DOM which creates the protected encapsulated stuff Shadow DOM implies the existence of light DOM, right? So obviously so you have to Have the shadow DOM or light DOM there and so I'm using that to illustrate what shadow DOM is shadow DOM is code You didn't write but it just shows up on into the components, you know, so yes, right? So that's why we can see the paragraph and the button and then we also see another paragraph in a button Even though there's nothing in the markup that we see there, right? And so this can kind of go However wild you want, you know, like I use like the Google Maps example, you know, you could you could just have like Google Maps show up there I have a few examples. Actually, can you pull up my guidebook? Let's go to the guidebook New tab HTML with superpowers There is not if I told you that I would already look yeah All right, so this is like I wrote a guidebook for my front end master's course and just made it public for everyone So this is pretty fun to walk through and then if you go to using right? So we'll talk about using it first this kind of the first like section And I like to work this way because you like start with like HTML and you like build out to the more complex complicated stuff But what my favorite examples in the whole world? This is like an example within accordion here, but if you click on that to up example in the side This is my favorite one. It's from Google Matt or Google Chrome labs You've probably seen these like disaster before after disaster photos or global warming or it's always sad Definitely is but I actually really gravitate to this right like this is one of my Favorite like editorial treatments because it is like evocative. It is like I like scan every single pic pixel, right? Like I really get into it And I stole this from the Guardian full full disclosure Don't sue me, but So anyway, this is like just an example but What's what I love about it is how evocative and storytelling it is what I don't like about it is I don't want to code it Like I don't want to code it. I don't want to maintain it I don't want like I don't want to do any of that right like because what's gonna happen, right? Like, okay, two absolutely positioned images. Yeah, great. Okay. What if they're different sizes? Oh, that's Dave's problem Oh, what if they are? Oh that that thing that slider thing like cool It did I code it with pointer events? No, I didn't. Oh, it doesn't work on mobile. Oh, that's my problem You know like did like does it resize is it responsive? Oh, I didn't think about that now That's my problem, right like There's too many places I already know there's too many places I Don't want it and like if you're like working in newspaper, let's say a local newspaper, right? Which like zero dollar budgets, right? So you're working a local newspaper You're just like this would take me a week to code I don't know like to do right maybe a day maybe two day three days, you know, but But here it takes me minutes So like you can go to the HTML tab on that pen and sort of see like what the markup is But it's just a like it's to up the element with a div inside with an image and then a div inside div with an image So like the before and the after Pretty cool, right? So like I I as an author when I write my little WordPress plug-in that outs puts this thing. I don't have to like In cue scripts or I guess I might have to for this But but like I can just do the element in like some image tags and it spits out the thing And I think that div is those extra divs like aren't even necessary. You could probably code it I think that's just to make it a block but But but the like and then so like a custom element in a script tag and like now you've like enhanced your CSS in a really awesome way and so If you go to like the html Um, can you edit that? Maybe you can edit that Perfect let's edit on copen Love me copen But what I was going to say was like, um, you know take out the script tag Just just like take it out Right, it's going to refresh. Oh man. That's your fallback, right? So progressive enhancement Baked in so just by the nature of like what it does. So, you know If the script fails if my some one semicolon in my JavaScript bundle Is missing This still renders out in the article because the html that shipped is still good html It just doesn't have the like enhancement Super power. Yeah sparkle sounds. Um that That like is necessary. So it's kind of cool It's very reminisce. I don't know where Like of like jQuery days old jQuery days, you know, or you just had to give it the right class name and set up the script tag To point at the thing. Um, it's even easier than that. You just need the right element name, you know in the right script tag so Yeah, so okay, so If you go back to the coursebook Maybe I have a few other examples like, um, like copy table. This is sort of like, uh, you know Like I have this one where like you have to actually edit this in like debug mode just because of like permissions errors or whatever Um, but like you can basically like copy the table and then Like go paste it somewhere. I don't know where you want wherever you paste stuff. So just for fun Yeah, now you have like a csv pasteable csv, right? Uh, and then like I also made it like download a csv like I use like Uh, whatever byte encoding csv That's kind of fun to me just to like, hey, oh, we have these tables And occasionally people want download them. I actually wish every HTML table you could like right click and copy as csv That'd be pretty cool. So that was kind of my wish here. And so I kind of just like made that functionality like just it's a table inside A custom element. So that's cool. Yeah. And like you said if for whatever reason it fails to load You still have your table and all the content is still there. It's just a little bit harder to copy and paste Yep, so yeah, so like all the enhancement kind comes in Uh, I've got more examples like copy table, right? Um Or sorry a podcast player is like I'm a big believer that podcast players need special features Like the back 30 seconds and the 1x 2x like if you're missing that you don't have a podcast You just have a bad sound cloud So like I'm like pretty like christicity about like a podcast has to have that stuff and so You know, so I made an audio element. That's wrapped by a podcast thing and guess what it progressively enhances. So um, so that's kind of like pretty easy to do um Most actually native audio players now have speed control. So maybe this is obsolete, but uh Whatever, uh, the next one details you tells is a fun one This is from Zach Leatherman, but he added a bunch of like Like did you see what happened there? Yeah, we had a little animation. Nice animated, right? Like animating a details element is like harder than you want it to be because you can't animate height yet Uh in html um or css. So like animating height is a bit of a bummer, but uh Zach here figured out a way to like basically you wrap details and then you give it like also if you hit escape It'll close it like it's focused on the window and hit escape Very nice, which is like an accessibility feature like you're going to use details on a menu. You kind of need that Um, I think he has like focused outside and stuff like that click close outside So if you like are outside it that should work. No Oh add a min width. I have it out of min width. So if you're on a desktop, it'll like click close right So if you kill that html demo Or So now click close outside might work. Oh, not quite. Anyway, I I lied. So anyway, it does work. It's good But anyway, it just adds features to the standard details. Um, um, We can talk about spice sections. This was like an open ui temp that tabs, right? Like, um But basically it's the idea like you may want to use those zoom controls on Here to kind of really simulate it. Um or on the pen itself Yeah um Because like so you want tabs at desktop, right? This is just like an experiment sort of you want like normal content on Like whatever a tablet and then you want on your mobile. You want like an accordion, right? So it's just this idea like content can kind of like Shapeshift morph we almost call it mighty morphin element. Um, but but the uh, Yeah, I don't know the status of this. I kind of had to uh, uh Leave open ui just for like time sake because I'm starting a company, but um, this is uh, Anyway, it's it's just it was an experiment and what's cool about it is that experiment that prototype or whatever you want to call it Like informed discussions We are able to have better discussions about what an element could look like what a tabs element could look like or What requirements it needs to have? Um, because we were workshopping an actual It's an actual html element, you know in the delta we showed it to browser people in the delta between like Hey That's a good idea and hey that's implementable is very short when you have a custom element. So like I think like It's very useful to like Speak this language, especially if you want to get involved in like standards processes. Yeah, definitely. Yeah, that's cool And probably my favorite one is the next one under there A frame I don't know if you played with this But you can make Uh, you can make uh VR using html Like you can like make your own metaverse just with html If you click that button or if you're in like the full screen, it'll yeah got weird, right? Yeah Basically like it goes to a full screen like full screen video game And then if you like are in a VR browser, like it'll like do the split screen So it'll like yeah, because it's like one screen per eye Um, but anyway, you have a scene and in a scene you have a sphere in a box and a cylinder and a plane That's like a two-dimensional plane on an airplane and then you have a sky Which is just a giant circle, but the inside's colored. So yeah So that's it So you have a skybox and uh in all and it's like five lines html And you've like made a VR world and if you click into the VR world and do waz keys like wasd You can like walk around and drive around um and use your mouse to like point Oh, yeah, you're close I think we're there we go. Yeah, is that working at all or no? I wasn't well. You can do it inside the pen there too Oh, yeah, there we go. Yeah, so There you go. Yeah, so you can just like walk around your world you made so If you're like I've used it to like I built I'm in a shed in my backyard I used it to like prototype my shed because I was just like I have no idea how big Like 16 by 12 feet is right like I am super good at 2d Like 2d websites, dude Yeah You'd start saying like 3d like I don't know decorate this room or buy some furniture and I'm like I don't think so. I don't get it. And so I just was like, well, I'm just gonna build my shed and with html And then like walk around in it and see if I add a little google cardboard and I'm okay. This is kind of about right so Um, so yeah, that's that's it's cool. Um, very helpful. So So that's like html, right? That's the the custom element interface Um, you could go over back to the guidebook and um, this is sort of like the Yeah, like there's like whole component systems generic components is kind of worth like looking at like, um This is by pascal shilp and it's basically like the tabs element, you know But you you know, no one wants to go to tabs element Generic components exist and you can style them however you want well getting into styling next But this kind of gets you into this idea of light dom and then that slot attribute Is like you can say what slot it goes into by default everything goes into the default But you can have name slots and send that to a specific slot In your html, right? So yeah, here we can see like slot tab and slot panel for the content. Cool So yeah, so all tabs go into the tab tab slot and all the panels go in the panel And then if you go to css, it's kind of doing a little Like just are you selected true And that's getting inherited. Yeah um, okay And then oh geo elements is fun. Uh this is alex's uh attempt at replicating all the geo cities elements, but in modern html In a more accessible way. So it's worth having around um And then I do I'll last there's Last two links here are pretty simple, but standalone components, right? Like this is something I'm Passionate passionate. I believe in strongly Like that two up element, right? I love it when you can just Use something off the shelf, right? And I think that's like with npm and all this stuff and you know, I got I got like used to like writing my own stuff or like Starting with something and building something I feel like the distribution model because you don't need like webpack or anything like that you can like Use some of these and just like Uh start like putting this in your app just as is, you know And your mileage may vary based on what you have but it works really well with like Older legacy systems. So if you want some increased functionality, it might exist. So that's yeah My favorite there is light youtube I was looking at that YouTube embed is the first for a company That's you know, google's all about page speed and then that they're there's One of their own spin, you know companies makes one of the worst embeds possible. Um, so yeah, I've used this one, right? Yeah, not as a web component YouTube embed is like 20 megs and this gets it down to like 740 bytes or something. So it's really It has performance implications like you fail a light house audit if you have a youtube embed or you get down to the yellow Uh, but with that, you know, and then just kind of like Casting forward, you know design systems component systems are kind of all the rage. There are people building whole entire component systems It's not just like one officer here and there Uh, like lightning by sales force lion by ing in lion school because it's like built to be extensible like, um Like they they want to be a foundation that you customize on top of Nice. Um, uh, whereas like and maybe i'm over speaking but sales force is more like This is how you make a sales force. Um, you know, so Uh, but lion's kind of more like these are generics to start on pattern flies by red hats pretty cool fast by microsoft That's a big company. Uh spectrum has web components worth noting the latest Photoshop for web like photoshop's going to the web Built with web components So can it do apps? Yes, it can it is In uh shoelace by kory leviska is also a really good. Um, I don't know. I feel like shoelace is like the Support your local indie artists. It's good. It's good. It's really it would be like probably where I would start if I was looking for like a A web component component system Yes, awesome and just I've been clicking on all of these just so everybody knows the links This is htmo superpowers. I linked it in the chat, but it's also in the description of the video So um, you can get it from there as well or just google htmo superpowers and you get this whole guide Yeah, so all right. So styling let's go back to the styling pen. Okay Styling is The least fun part of web components, okay so you are a very accomplished CSS person and You know, I'm sure what is your current like? uh Like style encapsulation, but like how do you prevent styles from Nuking each other. What's your what's your preferred way? Um 2023. Yeah, I'm sort of tailwind is the only answer So Um, I don't know. I'm I'm I'm a little all over the place with that or I keep changing my mind on it Every time I sort of start a new project that it's potentially an issue um, I am a fan of not having you know, just I guess part of it's just coming up with like a decent naming convention at the beginning um, I'm a fan of trying to avoid anything but Um, I have been getting into using astro a lot lately So then there you have your you know, just throw your style tag in there and it's sort of They're scoping it that way. Basically. Yeah, autoscopes and stuff which can be handy But I am it's one of those things where I I do sort of struggle a little bit in terms of like You know, you want to make ideally and if you're It's also depend, you know, you see these really big companies where it's a very big Or it's a very different challenge than when it's more like solo projects or if it's just like a small team working on something where You know, or even if it's a bigger team be of less people working on the css Then it's not so bad if you have a nice design system in place or whatever it is where you can sort of set things up So you're relying on inheritance and relying on the cascade and you sort of just have a well designed system I think is My my utopia that doesn't exist Um, yeah So then yeah, then it comes down to just but I start with naming conventions and then it depends on I guess the tech stack a little bit from there Yeah, no in like I'm probably the same is like You know, everyone's like oh naming is hard. I'm like, yeah, not really like I mean You just make sure it's not a cuss word Not a cuss word in another language And then you like just make sure like it it I don't know makes sense to a handful of people that it makes sense to Across the whole entire organization. What makes sense obviously starts. That's a little lossy, right? So that starts falling apart, but But all right, you're right. All right. We got some more tea In a design system Our website like a big website. You should really probably only have I don't know 100 ish components, you know, like I feel like We're not We're not talking infinite naming. We're talking like in the hundreds, right? for like a Distributable design system. I mean if you're just like in there just naming whatever like Like whatever I'm bad. I guess I I make terrible names But like if you're just like just in there like naming every element for what for fun I guess like that that can be a problem or if you're like writing your css like Dot title is purple, you know, and that's gonna like If you didn't have the fourth that the foresight to think like that's probably gonna fall apart Yeah, I don't know what to tell you so, um That's like a different problem. Like you just got to think through like how could this fall apart and be abused, you know, so All right, so components, right? So web components come with that encapsulation, right? So the shadow dump so we are like Like we have an element we build the fence and then like it is gonna draw Around the shadow dump and so like I've wrote this line around like the uh The component right but it's actually gonna be like the boundary is actually the We'll see it here. The boundary is actually around the shadow dome only So it's just around the the bottom two parts the paragraph and the button, right? but Let's talk about What goes through and what doesn't go through? the Shadow DOM we call it piercing the shadow DOM, which is simultaneously like the dorkiest and coolest thing we have in We have to kind of keep it right because it's like, you know, um, we have to kind of like What what is the most important thing? So I think like the best way to put this is like Okay, so we have our Regular DOM, right? Like how do we style a paragraph, right? uh, we style a paragraph by like font I don't know. What would you do like whatever font? weight old Font size Whatever, we'll just do 36 pixels or something like that, right? And you'll see like it got ginormous, right? Mm-hmm Uh, and then same with like the button, right? Like we want to uh We want to like make it pink, right? and It turns pink, right? I'm hoping you're seeing the same thing Okay, got it. Yep. Sorry. Okay. I'm like, you know So The takeaway right here, right Is you can style light DOM you wrote it you can style it, right? If you didn't write it Oh, you can't style it. So that kind of rhymes and that's pretty good. You wrote it. You can style it You didn't write it. You can't style it. So that's like the number one hurdle for me like figuring out web components like because because i'm good at css, right? and you're good at css and When you like start using web components and all of a sudden your styles quit applying That wrecked me, right? Like yeah, like It just was I mean it just was like what's going on because like I know how to do my job and all of a sudden I can't do my job. Like this is very frustrating. I took away like my agency and made me upset. So We can But we can't style the light DOM. So that was sort of the like big uh, aha moment for me, right? So the next thing, right? So we're going to try to style Shadow DOM, right? And so do you have any ideas on like how to style it or What would be your like? Yeah to style that button. What am I going to do? You know I'm guessing actually I I don't have any idea if a regular selector is not working. There's a few things that I would sort of Hope that you could hook into if it's set up properly Um, to make it easily to customize. So I'm sort of going like if there's I don't know my one I guess would be custom properties if they're set up in the shadow DOM. Maybe there's a way of accessing them So, yes, that does will work. So let me but but you know, it's kind of like even more basic, right? Like my brain. I was like, oh important. I sort of thought that and I'm like, that's not gonna work Is it coming out of your mouth and I was like, I think he's thinking It bears, you know, say it on the on his live stream, but no, mindy mine. I was like important do it, you know Like that's the that's the first step, right? Yeah, and then you're like, no, okay Well, then I you know what I'm gonna get more specific because I am a very important person So you're like example element Oh and my but you know, like here or whatever you're like, I'm gonna do this very Seriously and be important and it still doesn't work, right? And you're like, what's going on, you know Like and there are there's like stuff you can do like I've obviously styled the element to some degree, right? Like I've added but but that's because I wrote that part, right? Like I wrote the example element tag So I can I can style that Mm-hmm But this is gonna like kind of blow your mind, right? So p tag, right? Uh font style how like ready Oh, hold on wait Uh, let me just try a color red Oh, no, it's different Hold on. I now I need to like update my whole entire life Um So there's stuff like, uh Oh, there we go. I did now it's working place. Let me do it. Let me do that like custom element I wonder if they changed it. Anyway, this seems like it used to work a different way Uh, but anyway custom element p, uh, custom element color red, right? So if on the body or something, maybe that's my mistake. I was trying to style an element, but if I did it on color red, right I can actually Right. Oh, that's so interesting. Okay. Okay, right, right, right. Okay. So it's instead of styling the element You can rely on inheritance and it's still going to See. Yeah, okay. That makes sense. Yeah, perfect. So there's this whole thing called inheritable styles in Like the web in css and that's kind of any style that has the value inherit, you know Which is not off the top of your head. It's not very clear. Uh, but that's like order or like, uh, text Usually a lot of text stuff But you think about it like it was invented for iframes probably like or frames actually html frame But like passing a style consistently down to make the child content look similar to the parent content. So That works, right? But like we we can't style that button, right? Like like we're still not able to like We we can't like make that work. So um So you might think like, oh, what if we you know classes, right or could be like, uh, You know, let me I'll edit the javascript here, right? So I'm gonna make the button class Pink, right and we're gonna we know how this works. So we should say Pink and this should be background pink And It doesn't work. It doesn't work And the sort of like Trick there, you know, if we if we added it to our light DOM button That's pink. It should work. Hopefully you can that's our test. Yeah, but it doesn't work. So like It doesn't know about the classes on the page or the IDs or anything like that So so like having these like global class systems Might be a little difficult to work in here But the inheritable styles do and you know what else is an inheritable style You already said it but It is custom properties custom properties. So This starts getting into like How was your component authored right and how like does it work? So like custom or we could do Yeah, I got some element and then I could do like Button bg, right? And then I'm gonna make it pink, right and then in my custom element if it was authored this way Where it's like style Background Var Button bg Colom Orange we'll do an orange fallback just so we can see if it applies Um, so it's let's see here. It is not taking that is it? Give me a second. Okay. Hmm Maybe i'm applying this maybe I need to Let's try to put that on the root then and or whatever. Yeah There you go. Yeah So we're again, you can't style it directly on the element. You have to rely on inheritance So styling it at a high level thing. So it inherits in Yeah, and that one's weird because I would think it like would but anyway, but it's uh, But that's kind of what's going on, right? So our button like now We can style it so we can you know, there's a few things you can do padding size shape, you know um, the next thing like people do, you know Is like You know, you might have like a theme, right like built into the like, you know Button or into the element, you know or something like that. Um, you know Trying to think of like what like I could If I could quickly write this or something like that, but it would be like You know theme or whatever like this dot theme or whatever and then you'd need like to register like a properties properties and That would need to be like theme I'm punting on this because I don't know that Always fuzzy on the syntax because I flip between like custom and regular or like sorry lit and like regular elements all the time But anyway, you like register a property and then like theme and then in my Button, I would just be like, you know theme Uh pink or whatever, right? So that's cool. Yeah Something like that. So some elements have predefined themes that you passed through and then the kind of like more cssy thing is parts, right? This is sort of the the next sort of like thing But I can basically say like part equals Of button, right? So then when you're in here And you're like, I want to style that button if it has been coded with parts, right? You can do part button background But uh, so like these parts are really useful if it has it to basically like zero in, you know But if we had what there's some limitations, right? We had to like a span in here or something high span And you're like, oh, I want to go to the part Button span, you know like it doesn't that doesn't do it. You only get one selector And there's a few things like in this In web components where you only get like one selector at time But this is sort of like just kind of how it works. So Yeah, yeah Yeah, that's cool. That's Yeah, and that sort of opens it up and I guess in a sense like It means as long as it's authored in an intelligent way that like you sort of are exposing the things that People, you know, you want to allow people to customize basically uh, and then So, I mean in in a sense you're It's sort of a safe way to work because then somebody can't write some weird css that all of a sudden breaks it completely Or whatever it is. I mean, yeah, exactly like don't manage but Like you're giving levers for people to like I want to mess with color or font or size, you know, and um You know, if you if you use bootstrap, you've like been through the file The the vars file and like it's a lot, right? But like you could think of like each of those section blocks is like that's the elements vars, you know, like that's the tabs vars Uh, so maybe that comes into play if you go to that like two up to example. Is that still somewhere? That's in one of the tabs, I think well, I'm looking for the first the last one the last one someone was asking Oops Um, just really quickly you came in the questions and since we're talking about css Can you put a style tag inside a component? To set up with some properties and stuff. Okay. Yeah, you can so, um, I guess you could go back to my tab Yeah, so this is kind of like how like, uh The styling works right like uh, so you have this style tag in here And this is your style like this is your component styles. We'll put at the top because that's good for him, right? Uh, so I can do like button background pink, right? um And there it goes right like so this is my style, but you see how I wrote a global selector And it didn't nuke everything right? Yes. So that's like that's that's the Stop a bar stool from falling over in another bar problem, right? Like that's the css Like this is the native way to like stop the like bar stool falling over in the other bar So like when you you just you're writing code just for inside here. And so that's super useful Uh, because you know, whatever brawdy background pink. I'm I'm an ad or whatever All of a sudden, yeah background image Target, you know, whatever So like like that's like what we want to avoid so like this is like great for like, you know This is actually like the web component doesn't know about body. Like it's like dude. I don't have a what's body I have never seen that so it's just like css. It's just gonna fail But you know like so like when you're authoring your web component you actually put your style tag kind of inline styles more or less or like not inline styles like You can obviously do those but like the the like it's like a style block like kind of like html 1e style Or I guess is maybe two but just like, you know, write a style block and just add them there some of the like frameworks like lit and stuff like that that kind of give you a more like ergonomic ways or like they create a css object. There's also this whole other world we probably don't have time for like adopted style sheets and stuff like that so You can like there is a world where like this while this is handy and you can Technically right so technically you can like go at import whatever tailwind css or whatever you want to do here I'm not gonna recommend it But you can do that in here Imports still gonna have like the same blocking behavior It may actually hate this Yeah, it does not like me doing that but Ignore but what does work is like link rel style sheet, you know href Tailwind does css or whatever and then you can like use your tailwind classes in here You may I don't think you will like you should in theory be getting a cached Element but you may hit like a double download thing. So right that that would be one situation I'm kind of worried about like that's why this is like slightly gross, but Uh, but it's okay. It works. I guess is what I'd say and so Um, you know if you had like miles of css Maybe yeah, you just want to like have it outside there But the the future way to do it is these adopted style sheets and I could just real quick like so we do like Imports and exports right so import Uh, I think it's like Sheet like your style sheet or whatever from whatever tailwind.css as It's style. Um, let me let me verify this is true because I've it's been a while Do I not I have this um Okay. Yeah. Yeah. Yeah. Yeah. Okay. Uh, sorry assert type is css. Sorry So and it's not a deconstructed object. It's just you the default So yeah, okay, here you go. So like you basically like import Like this and then like what you do is you can like do So you import the sheet and so that exit if you want to put it on the body you do document adopted style sheets, right? and so you can actually like Add this style sheet to the list of style sheets in the document, right? Uh, but where you're probably actually going to do it is down like here where you're going to do this dot Shadow root The adopted style sheets like you're going to inject it into the the Uh shadow root instead of the like Uh document so Yeah, so anyway, that's kind of the like weird future of it, but um, we're not there yet. Uh safari has said We are implementing it. I think like so that's awesome. Uh, but uh firefox I think is still unknown if I have that right, but um So that's something to know about As a follow up there, um from when we were looking at these just putting in the style tag at the top, um, could they be Because you did it I'm assuming it's it would work because you did it before as an inline style But if you did it with the style tag and then set it up with a custom property, then you could declare But yeah, yeah, yeah Yeah, yeah, it was a follow-up that came from that. So just I I think that was like the original question And I'm just stomped over it. So yeah, uh background whatever What do I have bar? button b g right and then my dude really wants this to close and Or else it just says I give up. There you go. So yeah, yeah So you like and that's depending on how you want to work and everything it's sort of You know, it's all on the table. Yeah Yeah, I mean you mentioned like astro for scoping, right? Yes, like Uh, which view does a very similar thing and like adds a data attribute and uh, or like a Angular class name with like some extra robo barf, right? Um, it's like based on css modules, I think So pretty awesome. You know Like as a scoping mechanism That's maybe my favorite just because I get to like I can write whatever but but I need a tool to like Turn that out. This is like tool list, right? I'm using web components Exactly like I get all that scoping, but I didn't have to do the robo barf step um But it's a smidge. Uh, you know, I get all the shadow dom Essentricities, I guess you might say, so yeah, so a little bit of give and take Yeah, so but this is uh, I don't know This is maybe my second favorite way to like scope styles just just in terms of like, hey, this is You're able to like do this like You know, if you have something you're like, I want it to look like this People don't need to futz with it. Like I don't want I want people to author And this is kind of the big thing if you work in systems, right? I want people to write this I want people to write the example element Like I want that to be the api for writing a component or like using a component like I want that api Uh, but I want to make sure it has a few levers so people can customize it to their needs and I want a few I don't know ergonomics, uh, and and you can build all that with weapon boats Yeah, another question that came up on that just when it comes to writing the css and like the regular css Two or three questions since we're talking about that now sure, um, one of them was Oh, one of them is asking about, um If that's like is it say you're you are styling it would you recommend doing just example element as an element in your CSS or you sort of you know, I think people have been so trained now with you know, bem and all those other ones Or it's like everything must have a class on it um Any thoughts or it doesn't really matter Have you seen any patterns come up? so I feel like you can just use example element. It's going to be the most explicit way to be like This is actually just operating on this, right? um Now I think like bem all that stuff is awesome But if we kind of like Uh, you know, you have this concept. Sorry of host, right? So host in web components, right? And bem is base element modifier, right? So Uh background purple. Let me see if I can do that Um, I feel like that's gonna do it. Okay. So I can actually style Example element from the inside right the host element, right? There's even a few things you can do like you can be like host Context to which this has mixed support, but like you can be like Like oh, I'm trying to think of like like If if if the host is in a Whatever a All right, well, it would be a good. I'm trying to think of a good element. Let me think um, if the host is in a ABBR tag or whatever So this is weird, right? If I go up and I wrap it in ABBR and then I'm just like Like if somebody put an example element in a host BBR tag background gray or something like that I don't know. Um, like you can actually like You you have like context. That's kind of like a has selector, you know, it's like if ABBR has this element Do this, you know So smidge weird, but anyway, but you have access to the host. So what I would say is in in Web component land like you you don't have base element modifier. You have host element classes So you have I call it hex so you you have hex css Because you just heck it and uh, you just write it how you used to 10 years ago or 20 years ago. So um, so yeah, like so in my Opinion, this is my opinion. I I think like BEM or whatever or classes only right very Smart way to avoid style collisions Web components have avoiding style collisions built in So maybe we don't need it is kind of my my Proposition, uh to the general public, uh who are interested Oh, I was like, why is it all dotted? It's the AB I was like, why is it so messed up? Anyway, okay, cool um Yeah, so does that maybe hopefully that answers the question, but I think like I think like Again, it's it's a little new paradigm, right? Like it's like, oh, I don't have to just use classes like that's the best CSS advice for ages because The the shadow DOM is my my scoper. That's my scoping mechanism. And then in the future, hopefully, you know Oh, no this year next year like we're gonna have at scope too, right? So you can kind of be like it starts here and ends here Like that would be really cool You know for your document, you're like at scope and you just have like a Class on the big element, you know and so like you're like whatever I'm trying to think of a My carousel or carousel, right carousel button These look like this because it's in the scope. I use scope to define scope specifically to that. Yeah Or like article, you know, I think it's gonna change how we author CSS Even like CSS layers could like kind of do some of this too. So I'm sort of looking forward to seeing that a bit because like I said like I think Well, you know seeing things like this. I think it sort of highlights the advantage of scope styles, but the issue I've always run into whether it's like with I've seen it a lot with react where it just ends up being every like everything has its own scope styles But they're not Again, I think it depends on experience and how they're setting things up But you end up seeing like 12 different components that are all sharing almost the same CSS with like these little tweaks or whatever It is just like you have like the font size has been declared over and over and over again You're just like well, you know You could have avoided that but like sure there is something unique here that does need to have its own component styling and stuff So like here, it's really cool because it still encourages You even set it a little bit on your site like you start, you know start with the html set things up CSS style it and like I think it encourages a little bit of that like traditional way of thinking of let's just You know follow the regular one But then if we need to have certain things that are more scoped to you know to make sure it where we're following this it works But we're also going to enable it to like the whole idea here is that it's plug-and-play, right? It's not used for this one web app. We're building this should be able to be transported wherever we need and then so we need to open up these levers Like you said to be able to customize it to fit wherever it's being plugged into so I sort of like that I think that idea can be universal It's just I think that because it's so easy to make certain scope styles within other whether it's CSS modules or other stuff like I think people get lazy Whereas here, I think it's a little bit of a different mindset I guess in a way because of how they're being created or at least for me. Anyway, I don't know if that makes any sense, but I I super agree like I like this View style scoping because it's already in view. You know what I mean like and I I do style scoped and then it's like boom like Uh, can't I can't fight can't fight how easy that is, you know, like I don't even I don't think web components win on that you know like but like But in terms of like portability I've used zero build tools. I'm in a freaking code pen like try like like you can write a view component in code pen it's like uh through a template but like I've used zero build steps like sass. I guess is running so like Think about that, you know, like like if you're like web component needs to go to the like ruby on rail site the old dribble site the wordpress site the the like React application the modern back end, you know, like Where your front end and back end are like totally different, you know the legacy java app like In my mind, this becomes a really big competitor. And if you looked at that list of like design systems, I think it's the next tab like Look at these sales force i and g red hat microsoft adobe Those are all very big companies, right? So like the companies that are using web components tend to be very large companies because they have they're in the system Situation I should say like where their code has to go to a lot of places Now if you have an all react shop, we're only, you know, like Yeah, like again, you can't beat it. Like that's like that's what you're doing until like react changes its mind In two years on how you do styles, but anyway, um, I'm just kidding. It's not that bad every four years So like I think like a lot of these companies are kind of like rather than the churn of Oh god, we have to rewrite it. Oh it updated like they're just like let's start on a more solid foundation and have mass distribution without some of this tooling churn I think they're You know, I think it has its Problems, you know, I giving two developers to do the same thing is always a problem But like getting like I think like there's some momentum to be like, oh, yeah, we can like do this a little more Possibly, um, so and that's it's all organization structure to like Sometimes app one and app two dot my company dot com are totally different business units, you know, and so like Yeah, I think like so one can just be like I wrote it and next and I wrote it in view and I wrote it in Ingo, I've heard stories about that and it sounds like a nightmare, but But you know big companies need big solutions some Yeah, but that it sort of does I wanted to ask a little bit about that idea of like say comparing this to That so that worked out well But I guess like you said it also For for large companies that do potentially have All these different things going on It it's I think a nice solution because then you're not so worried about Again, you're you're sort of going back and like let's let's look at you know Not relying on these extra tools even though like you might be using those tools But it may you know if you if you have a nice system that's built with these then you can migrate probably a lot easier Uh to new things you can have different teams working on different text acts and it's not the end of the world Um, so like you know they play nicely together. It's not like you're creating this and work You're not stuck with this decision that you made all of a sudden because you decided to go down that route or whatever it is Right. Well, and it's like is example element going to work with Uh web components 18.4 like you don't have that problem So, you know, if you if you're like marketing site and app like maybe you don't need this, right? Like those are like two different concerns, but if you're like flight booking feature and customer credit card point redemption feature, you know, like if you're that world Like where those are like two different apps within your company, but they all kind of have to look the same and feel the same Uh web components might be great I did get a question about what it looks like in the dev tools. So Oh, yeah, um, that's probably a you thing. Um Is that a you thing or anything? I do have Actually, I'm curious. Yeah. So I I can see it in here. Yeah, perfect. Um, but I don't think that's by default I think you have to enable that in your settings somewhere. Oh, maybe Um, I'm not sure what that would be So if if you'd look in in something and don't see it in there Just do a google search for how to enable shadow dom in your dev tools because it's in a setting somewhere I think um, but you have to turn it on Yeah, so you you get a pretty cool thing, right? Like so you have like the example element and it just looks like html and then shadow route Which looks like a little bit, you know back to the iframes thing It looks a little bit like the iframe Uh, where it's like oh iframe document or something like that and so shadow root and open is open or closed shadow Dom it can be open or closed to the outside We do open kind of by default is the best practice right now Uh, but yeah, and so we see our light dom coming in through a slot, right? So and that's like revealed I don't know what happens if that knew that button's new to me the like quick Okay. Yeah, so it tells you what slot it came through and then it shows you what got revealed in that slot and then if you go to like Uh, and then you should see the shadow dom paragraph below the slot So it just kind of echoes the html I have inside of my component if you went to a more complicated example like the um Uh, what would be a good example? Um Like the I thought I had let me see here Um My brain's thinking of a very specific one, but it's very Maybe it's the like generic component. Yeah. Yeah, do the uh the tabs component That one or yeah, yeah, and then reveal that html So, okay Yeah, so that's all your light dom below right and so you can like point like go click slot and you'll see Like that should be revealed in the panel slot, you know, so Yeah, so then if I did the button it brings me to the tab slot. Yeah, and so right above that you see div part tab list So now we can like if we inspect it we can kind of see the tab There are the parts and stuff like that that we that we have access to style so I can do like Uh generic tabs colon colon part tab list, right, right. Yes. You know that that's exposed then. Yeah, cool Yep, and by default it's like a flex row or whatever, but you know, if you're weird make it different, you know, like or just You know, and I think even too a few um Yeah, like you get like some access to like, um, you know styling things just a little bit different. So Um, and again, like you wrote the buttons for that, right? If you go to the html tab or the Inc code pen probably but yeah, like There we go. Yeah, you wrote the buttons You can style the button like, you know, but you didn't write the tab bar So like it gives you a surface area to style that tab bar, right? Um, so yeah, that's kind of it's cool Cool. Yeah, that's awesome. And another question that I think is good is how do you handle layout shift in web components They said they think they're rendered client side so far. So including By including a javascript file to make them work. Yeah, so Yes, okay. Good question. You're an advanced student gold star If you go to the guidebook, I have an example here. Um, so there is this, uh property called defined In in the styling and then there's like the last link in the sidebar defined Okay, so We are creating a slow element, right something that takes a long time to load It's basically like got a time out for like five seconds or something when it comes in So, uh, if you scroll down a bit, you'll see, um Like yeah, so two seconds to load so it rerun and it'll it'll like show you how slow it is, right Mm-hmm. So the style we're using Um In this is sort of in this this is actually an html feature. That's kind of weird, but it shows up here If you go to the css Or maybe the jsvnl Yeah It's good. Yeah, okay. So see this slow element Not her see this div slow element. That's our template. That's what gets injected like when it mounts Or whatever So if you go to the css there This is kind of one tool, right? There's a few tools I can get into but this is idea of defined Like an element is defined and it'll turn the opacity to one when it's not defined you can just hide it or you can You know You could set a height or something like that like a min height or something like that if you wanted to like Reduce cls cumulative layout shift or something like that But you can like basically all I'm showing is like this element doesn't exist But then it does exist and so I'm going to like slow down the the like mounting of the element so So if you like hit rerun again or does this have rerun? I don't know if it does So you'll see like two seconds and so it's like, uh, it's whatever fake Stale this is stale content in my slow element, right? Like so like that stale content is just hidden by default And so what's cool here to like your progressive enhancement strategy We showed like the two images on the double-decker images and then they turn into the slider It doesn't have to be that like there's kind of like native skeleton texting Uh built in right so like I'm kind of using my light dom there my light dom text as a Uh as a way to like basically show Uh content on demand, right? Yeah. Okay. So that's one way There's more Well components don't stop So if you go back to the guidebook, um, let me let me find out where this is. Okay underwriting Uh, which this is a section we didn't get to that's this is It's javascript. You write a class you put the button the button increments blah blah blah We're in boring boring. So uh go to A declarative shadow dom we're asking advanced questions to here. Um So remember how we had the template element and I was like injecting it with javascript And or like I was creating a template element Adding the html to the element and then the custom element like consumes that is what I was doing You can write the element in html and consume it in the component, but uh a lot of things too It's kind of like bundled in the component anyway What you can do is this new thing called declarative shadow DOM It is chrome only right now safari is implementing it or maybe just release it actually in like a Preview branch. Um, I'm not sure on that. Uh, and then not sure about firebox uh, but the you can basically Deliver the code with the shadow template So you can say template shadow root open, which is you have to have that that's like the trigger to like Oh, I know what to do. I'm the browser, you know and like you can send your styles You can send your whatever icons your slot Uh in your button close and it'll like Like pretend that's the element like it'll just do the element without the other stuff Uh, this is cool because like this gets us close to the whole I I don't know when you do this like I don't know when you do this. Um You could do this for just style scoping if you just wanted style scoping you could do this So because that'll come back stopped scoped. I believe but the But what's cool about this is, um You can send this template. It'll render that template as quickly as it can and like as html in the first pass And then when your script comes and mounts to make it dynamic or hydrates it That's the term we all use right so hydrates it It will like then take over Your buttons become interactive or whatever it is. Um, so this is another way to like I guess like I guess like pre hydrate your components at least give them something and you know There's there's a mix right there's like light dom. There's using defined There's using these declarative shadow dom for ssr sort of situations Lots of different options. Um, you know, this will render but not be interactive So you may hit that like I don't know my favorite example is the verge is search button doesn't work for like two seconds or five seconds or something So like you load the verge it's like diamond work, dude so Not gonna work for a bit and so like, um, you may hit that like uncanny valley here with this situation, but um, but again These are very small right like I like Web components on average are or is a magnitude smaller than other counterpart systems? So like lit html is like seven kilobytes or something like that So compared to like 110 with react and react dom. So it's coming very fast is what I want to get at And so anyway, so you're you can do this declarative shadow dom and really kind of I don't know you can like do like full skeleton screen stuff in here too Like this is gonna be what my like i'm gonna do the gray box and the gray text that like animates and kind of does The wipey wipe, you know like I hate that stuff, but hey you can do it Yeah, that's awesome. Cool. Thank you I'm just scanning really fast to see if we have any other questions that came in In the meantime, I wanted to ask about progressive enhancement, but you already we already sort of covered how well that works for that Which is great Yeah, there's like it's it's I mean it was designed like in 2010 right like this is like when this came out So like it's very like that's kind of top of mind And so and again, I think like a lot of legacy or companies with legacy projects are using this because it is very Like friendly to like oh we had this but we don't want to mess it up. We just want to make it a little better like yeah I guess my I don't see any other questions yet even though one might be coming in but For an accessibility standpoint, uh, is there any hang-ups issues or is it just There's like two bigos I'll give them big. Oh There's workarounds. Okay. I have it in my FAQ. There's like a Thing on accessibility, but there's sort of two places where it gets tricky focus management Right like so I open my dash modal, right? And what you have to do right like when you close my dash modal You where does focus go? It has to go back to that button, right? But the web component It don't know about that button So how do you get it? How does the web component get focused back to a thing? It doesn't know about There are workarounds, you know like um There there's workarounds, but and I can't even like Gently articulate them, but they they are like not your favorite ways to program What I would say there is focus management is hard like and it's also hard in web components, right? The other thing where web components there's like a really specific problem where if I have like label And my custom input or my slider or something like that, right? And So how do you do a label, right? It's like label for And then you reference the id right label for like cool slider And in cool slider Well, guess like I can give in an id, but but that's not the reference. That's not the interactive element That's just the wrapper. That's the host The interactive of elements somewhere in the shadow tree. So like so there's no label association So it's called cross root aria is the term So this idea of like how do I get the This aria from this route to also work in this route And you know oftentimes like another example I saw it and was like tool tip, right like you had the little tool tip button And then you had the tool tip box Those don't know about each other. So like how do you How do you do that? And so there's A few work arounds like you could actually move your label inside of here Done solved, you know, uh, you could Uh, I don't know I think we solved it. Everybody go home, you know, um You know, if your shadow routes open you can maybe Like come up with stuff or like ghost labels or something like that already labeled by or blah, blah, blah, but There's not really a good way to do it. Uh, or like there's not a system like refs, which is like in react and View and stuff like that where it's just like reference this element. It's somewhere else. Just you figure it out later, you know, like HTML is a little more like I need an id or outside die. So So yeah refs would be cool, but um, but there's this idea of cross root aria where you're saying like um Okay, this is like aria delegate whatever ID to this thing so Or this label or something like that. So I don't know what the status is if that's progressing or not But that is kind of the idea of the fix. It's being talked about. It's a known issue Again, I think there's like work arounds you can do You know balancing light dom and shadow dom too is always a good one You know like like if you're things like a progressive enhancer And you wrote the the input yourself like you're like input Cool slider and it's type range Well, you got a reference, you know, and if you're just building whatever Fig ui on top of it or something that controls that element like maybe you're okay I don't probably not in that situation because like you'd want clicking that thing to focus the slider, but Maybe we can maybe you can do that because if you wrote the light dom, it's probably a lot easier, right? Yeah that makes sense um A couple other questions that have come in a few people have been asking I just lost it now about Stencil, I think it is. Yeah, um, there's a page on that that thing. Um There's like I I am not mr. Libraries. I use view uh, but like I don't generally recommend libraries for web development just because I'm I like vanilla javascript, but Web components are a place where I would recommend them because they were designed to be very low level, right? Web components is really low level and if you like Look at like a web component and web components have a life cycle almost like react, right? So But if you like look at like authoring a web component, it is very, um Boring it's just it's just not fun Not cool. I'm not modern. It doesn't feel that way right out the gate So there's a few libraries like lit is kind of the most popular one. I'd say it's from It's formerly polymer. It got born out of the polymer project like so it's got google backing, but um You know, this is one of those situations. Uh, Cory Leviska from shoelace had a really good post where he was like I wrote shoelace all my own like I basically ended up building my own meta frame and it was bigger than lit So I just converted everything to lit because it had as everything So lit's whole thing is it has like the lit element, which is like your custom element or whatever or html element basically and then like you Have like html tag template literals which generate your template and look at that it looks like react, right? Like it just it's a clone It's a little different But then it has like act click handlers and stuff like that kind of convenience functions That that I think I expect as a modern developer, right? Um Rather than add event listener add event the listener add event was Uh hybrids is another one. That's kind of like felt like it's pretty cool. I thought it was kind of you know It's kind of like you just do this. It's got more react, but it's just kind of interesting. It's like Uh Kind of global function me looking it's not in a class structure. So If you go down, I think stencils down here stencils another one. Uh, it's good. It has uh, decorators um, you may or may not like decorators, but um, actually pretty awesome for I should say lit also has decorators that you can use but um I like this it gives me kind of angular vibes. I don't know just like angular projects I used like kind of looked like like that, but uh stencils very good I would do that haunted is like maybe my favorite. It's lit plus hooks like so it's like kind of like Very modern react, you know, so not your class-based react. So I don't know very cool. Um But there's like I think at like time of writing this like last time I checked There was like 70 different ways to write a web component like 70 different libraries for writing web So you're gonna find one you like, uh, but those would be probably my top picks Awesome. Thanks um and What was the other one In the q&a section And I should say stencils backed by the ionic people who are really cool And I think stencil has this superpower. Da-da-da that sparkle effect. Um, that is uh um Stencil has a superpower where I think it's designed to Convert so you write the web component and you can like transpile it to a react component I I haven't tried that but that's like I think one of the features of it and that's I think how ionic actually Goes to so so many different frameworks and stuff like that. So yeah, cool. Um, and another question was Do they have access to the window object? um Good question. I think you'd have window This is interesting because you'd have like I feel like you would have match media But you wouldn't have like window.foo um That's a good question. Um, I can try my thing um console.log window Let's try it. Let's break the internet. Um Uh, wait, hold on got too log got too big doesn't like yeah, I mean I have the window. I can see the window. Um But yeah, I get so I mean maybe like there's some like Global passing of stuff you could do here. Um, I mean, it's probably not If you're doing it on window, right, it's not reactive by any means like Like it's going to be like when it mounted. So if you change it on window and wanted that, um So I guess technically you do have it. Uh, I Don't I don't see it used a lot other than like a match media or like, you know, kind of your I mean window alert Uh Maybe a window navigator, but that that's Actually good to know that was a good question. So I hadn't thought of it but like I think it does but I don't see people abusing it or using it. So Um, I'm gonna skip back and come back to this other one because it's a bit technical and just a nice simple one Are nested components a thing Oh, yeah, for sure for sure. Yeah nested components. Uh in my examples I have like this brewery app, but I keep the whole brewery app. Um In the examples, yeah the on the top so The main navigation all the way Yeah, um, if you go down like child components, I have a whole section on it Um, so like we're kind of like refactoring this app to like have child components Like we have a brewery and then like a brewery template like how to do that Um, but it's basically just you know, you make sure the script the import, you know The imports and exports are all there and imported onto the page and you can render child components Just use it like html. So like it got you don't have to like I don't know register the component inside the component like you do like with view You can just say like hey, it's not is it on the page. You know what to do, you know, so That's again like part of like html here and you know, zero build tools And uh this one, okay Say you want to dynamically render in an element on a condition How can you register the handle slot change function for a slot that hasn't been rendered in the initial rendering? Bit more specific. Okay. Yeah Uh It could be a general just idea if Yeah, okay. Um, I have to unpack a little bit of this. Um, is this somebody who writes web components? It sounds like I have a feeling they've done done somebody who is like a spec author Okay, so uh, you're passing your your what is it the the whiteboard interview right now? Right, right. Like I'm working at google. This is amazing. I can't You know, it's gonna work. Yeah, they're taking it right now Applying for a sales force job and like leaping me in. Um, okay So slot change right like is a um So it's basically like a reactive property. So every element has a Life cycle so like it has uh connected callback Adopted callback and and those are like component Will mount and component Did mount I think is what would be the right terms But there's this slot changed callback too. So like Or an event so on slot changed Well, do this Connected call or run an update function or whatever you want to do however you go to your component like So so if somebody is up and fiddling with the light dom and like making a counter go up You know My component is really only first pass gonna like do that like, you know and There's stuff you have to do for like attributes to do the same thing too Like reactive attributes and stuff like that But but more or less like your state inside the component is always like is always reactive So like I hit button update and then button update count updates than my view count updates So you have a local state you can inherit props, right? And you can make those reactive And then but the slot itself can also be reactive. So that's and that's where the slot changed So if somebody changes the light dom and the slot changes then the slot change callback can fire like an update function I think this question gets like really specific like How do you fire a slot change when slot doesn't even exist? Is that the question? Yeah, I don't think you can do that I think it would just be like it would render on like Just in time render, I guess like so it's going to render the slot with whatever was in it Right when it caught it, but then it's going to catch up on the next change. Right That's what I think In my limited understanding of how Uh The very rare slot change that works that is um, that is it. But yeah, there you go Awesome. Thank you. Um, I think we're gonna we're gonna end it there We've been on for a while now and your time is valuable and I so Um, I'll just say again that if all of Dave's stuff is linked down below in the description So there's his twitter which you should follow. I think I put the link to the shop talk show too Um There's the Guidebook that we've been poking around at throughout this Um, so and and some of his website and some other stuff probably so if you want anything Dave related you can go find it below Um, I didn't thanks so much for for coming on and and teaching me a bit about them I'm I already sort of I had the the general idea of what the purpose was but now A little bit more excited about them That I understand them better. So I appreciate your time and for coming on Yeah, well, thanks for having me and yeah, if you're interested, I would just don't go writing them No one needs more code, but just like try to start with that standalone thing Like go find one off the shelf and try to use it and just see what life is like See if you like it. Maybe you hate it. I don't know But maybe, you know, if you do hate it like let me know In nice words, I have a soft heart But let me know and I can upstream any feedback to the to the right web component people If you have any tactical tangible feedback, that isn't just mean things about me. So I appreciate it Uh, yeah, awesome. Is there anything else you want to plug before we go? No, that's it shop talk show luro app. Uh, look for it Very exciting. So awesome. So yeah, thanks everyone for for hanging out with us. I appreciate y'all being here for for this I hope you enjoyed it as much as I did and I don't know when I'll be live again But regular videos will be coming out whenever every every day well three days a week. So Yeah, well two two regular videos in a short. So it's it's a thing, but Yeah, awesome. So let me just find my end screen here and thank you everyone for being hanging out with us I don't even know if I have one anymore. So I might just hit end and oh credits. That must be it There we go. Bye everyone