My talk is called html with superpowers. It's going to be kind of an intro to intermediate sort of the area of web components. And I'm Dave Rupert, and that's kind of what you need to know right now. A little bit about me just links if you need them. I work at a company called Paravell. We're based in Austin, Texas. I've been working on an app for about the last six months called Luro. And I have a blog. It has an RSS feed. I have a podcast with Chris Coyer, formerly of CSS Tricks, called Shop Talk Show. We have a YouTube, over at youtube.com, so I shop talk show. I run my mouth on Twitter. I put bad code up on GitHub and CodePen. Please mute your headphones or wear headphones if you go to my CodePen profile. And I'm involved in a group called OpenUI, where I'm doing web components. And I'm in the web components community group, which is just a W3C group. Anyone can join. I'm just a member. I'm really not, you know, not anything special. I'm just a participant. So, and then kind of housekeeping for this course. You know, I have course links. There's a whole guidebook up at htmlwithsuperpowers.netlify.app. The slides, these slides here are slides with superpowers.netlify.app. And then have some web component links. The first one is to the like web components community group site. Then the web components community group GitHub, which has a lot of like, like repos and kind of upcoming specs that the community is kind of advocating for. And then OpenWebComponents.org is a really great resource for just learning web components. They have a lot of materials and tools. Lit.dev is, Lit is a web component library. And they also have tutorials and all kinds of things, educational stuff there. And then of course, like Mozilla MDN has a web components section worth checking out. So let's tell you who this course is for. It's for developers who are evaluating web components. If you're kind of in a position where you have to choose technology or you're just interested in trying to figure out what they are, do they fit into what you're doing? Do they fit into your workflow? This is for you. Developers forced to use web components. I think there's some in this room.  Oh, no. This is for you. People interested in web components, maybe you just heard about them or having, you know, you have a passing interest and you're not, you know, particularly motivated, but you're just interested. People interested in component systems. Design systems are a big deal right now. This is a way to build one. And so if you like component systems, you might like this. People interested in component systems but don't really like JavaScript frameworks. This would also be kind of in your alley here. And anyone who makes websites really because it's part of the web. What are web components? Let's dive in. This is the boring definition. Web components are a set of web platform APIs that allow you to create new custom reusable encapsulated HTML tags to use in web pages and web apps. That's from the old web components.org site. You know, the key word here is going to be encapsulated. But, you know, these custom reusable, this all sounds pretty familiar, right? If you've been following web design in the last 10 years or so, Legos, right? Components, design systems. And this is how we build websites more or less object-oriented. So UI.  And we staple these components together to build up our websites. You know, and right now we're probably all using some existing JavaScript framework, like React or View or Svelte or Angular, to kind of build our Lego sets, right? We're already doing this component work. So you might be wondering, like, these aren't new. You know, Dojo had components in 2005. Then jQuery UI and jQuery and 2006, YUI, 2006, EXTJS, which became Sencha 2007, Angular 2010, Bootstrap, Ember, and notably web components were first proposed in 2011. So they're kind of old hat. But then React in 2013, View in 2014, Svelte in 2016. Web components aren't new. So what makes web components different than all the other sort of ways to build Legos, build component systems? Well, the big thing is web components are a set of web standards. Which, you know, there's some nuance there, but it's not just reams and reams of JavaScript that get sent to the client. These are built into the browser, these features. And there's four sort of critical features here. Template, which also comes with a buddy called Slot. We'll talk about that. But template is basically what it sounds like. It's basically, you can put HTML in there, and the browser parses it and says, oh, okay, I know what elements these are, but it doesn't render it to the page. Sort of like a ghost element, like a script tag or something like that. Custom elements, these are sort of the hallmark feature of web components. The ability to basically create your own HTML like interface. So the only difference is it has a dash in the name. You have to have a dash. Otherwise, it's not a web component. We reserve undashedness for native components. So custom elements are kind of a hallmark feature. Shadow DOM is just like a terrible word. But encapsulation is probably the best way to think of that. And the way I think of it is almost like an egg. The egg wants to keep the egg stuff inside and doesn't want it to go out and doesn't want anything to get in. And the same with shadow DOM, there's a boundary around there and inside the egg is the shadow DOM. I know analogies aren't super great, but that's the one I'm going with. ES modules, nay HTML imports. HTML imports were killed by Mozilla on December 15, 2014. I'm not mad about it. Yes, I am. God forbid we could import HTML using HTML, but whatever. We're left with ECMAScript modules, which is the sort of native way to import and export JavaScript functions, classes, all kinds of things, variables, I guess you could import and export anything with ES modules. And so a lot of web component libraries have now moved over to this standard just because it exists and it works. And it's really great. Digging in, template element looks like this. Pretty basic. You've just put HTML in there and it doesn't render the page. The template's buddy slot is kind of interesting. Slot is used to reveal content inside a template. And this only comes into play like when you have like a shadow DOM, but basically you say I'm going to, if you think of that custom element, you have the custom element, and then you write stuff on the inside. That stuff on the inside gets thrown into this slot element. That content is revealed there. And you're not limited to a single slot. You can have multiple slots and give them names. And then you can pass things by name into each slot. So pretty efficient. I usually typically use the single slot method. And yeah, if you've used View Slots, anyone use View Slots? Same principle here if you've used View Slots. One also interesting thing, a superpower, is that slot has a slot changed event. So if the slot, if the content changes, like somebody uses JavaScript in a weird way and changes the slot, you get a slot changed event that you can react to inside your web component. Custom elements. We talked about this. Only two rules. And that needs to have a hyphen, right? And then you have to register it using custom elements, oh, custom elements, plural, sorry about that, .define. And then custom alert. So this would be like a custom alert here. I can try to attempt to highlight, but a custom word, and then we give it a, like a, we pass some attributes to it. And that's going to change the way it looks, the way it feels. And then when we kind of register it, we kind of put those attributes there. We're going to like observe those attributes, see if they change. And then we're going to have a constructor function in our class. And then we're going to do more stuff. And then we define it here with our class that, so that custom element with the hyphen refers to this JavaScript class. So when it gets called, it sort of executes that JavaScript function. Hopefully that makes sense. Shadow DOM. Okay. It's an opaque term to me, but yeah, in encapsulation, nothing leaks in and leaks out. And I will say, this is maybe the biggest superpower and also the biggest frustration, because you've never used this in a component context before, unless you've worked with web components. It's sort of a part of the web component spec. So if you, we're going to learn about it, but it's just kind of a, oh, it can be frustrating when you, when stuff isn't happening the way you expect it, or you think like, oh, I have access to window or the document. And suddenly you don't. So, so custom word. And so what happens here in the shadow DOM, we have that custom alert with the content, right? And we have shadow DOM. And shadow DOM implies the existence of light DOM, right? So you have the light DOM is the stuff you write in the shadow DOM is the stuff the component writes. And so it's going to put up an image with like a warning icon, and it'll have like a slot to reveal that content, right? And then the button to close. And I'll kind of get into that later, but you could kind of imagine like, you know, a situation where you're handing a design system off to coworkers, and you don't want them to be in charge of coding the button. You don't want them to be in charge of coding the icon system. You want to give them a very strict set of icons they can use so they can't just ruin the website. So the shadow DOM is a really great way to apply some fences. Like you can do this stuff, and then we'll take care of the rest. You didn't have to do some add event listener. Yes, is there a question? Yes. And if this is skipping ahead, just let me know. But so by default, a custom element just lives in the light DOM, and you do need to run like this dot attach shadow to instance or create a shadow DOM inside of the Yes, correct. Yeah, good question. Yeah. So so shadow DOM isn't for free. Exactly. You have to attach a shadow to the custom element. And shadows, it's weird. They can be open or closed. Obviously. So closed means it's locked down, but open means you can access the shadow DOM from the outside. So I could, from a parent component or something, I could talk to the child shadow root. But I could talk to the shadow DOM in the from a parent component. But when it's closed, you don't have access to that. And I can show that off if you remember to remind me. But yeah, so you can close off a shadow root if you need to. You might think of in security specific situations or, I don't know, Google Maps or something, they don't want you futzing around with their Google code. So they'll just lock it down. Or reaching too far into stuff they do. So and then delegates focus defaults to false. But this is an accessibility feature. It's a little bit complex, but it will try to negotiate if your element is supposed to be focusable, like an input or something, your custom element, you'll try to negotiate focus to the first focusable element inside the shadow DOM. So if you think of it, you have an input in the shadow DOM. If this is an input, and you click on custom alert, you know, without that, the browser is like, okay, you clicked the alert, but you want to focus it, pass that focus down into the shadow DOM. Everyone set? All right. ES modules. If you've done a course before, you've probably run into this import and export in JavaScript. And this is surprisingly relatively new. CSS had imports first. Just want to call that out. But JavaScript finally got it. It's sort of replacing the node based require syntax. And there's a few, you know, it's basically you can just pull out variables, you can pull out just the default class, but you have to set it up in the code to have an export. So you can only import things that have exports and export things that have imports. There's also some like interesting superpowers with ES modules. If you use to use a module in a browser, like just from HTML, you type script type equals module, source, whatever path to script. And what's interesting about that I learned somewhat recently is that actually puts your script on a fast path, like on a modern JavaScript engine inside the browser. So you can like get faster JavaScript just by moving to modules. I didn't know that there's no manual that tells you that. But I'm telling you now, there's actually a legacy parser to support legacy scripts and how they sort of handled everything. So if you use the type equals module, you get sent to this fast path evaluator. So might be cool speed boost to your website just to switch to those. It might not be super easy things fall over. But you know, but the neat thing about this is imports and exports. And so what's neat is I can like I can import a button specifically with web components, I can import a button.  I can just rename it if I want. And then I can add like I can change attributes if I want, like change the default stuff. So it's super is just a word that says like behave like the parent thing. So behave like whatever's in this extends. But the so now our hero button will behave like the normal button, but I'm going to set the size of large. And you know, so this is a neat thing if you ever like, steal elements from somewhere, no, we don't steal, no one would steal an element.  And it's great. So this sounds like it fits into this question, but they're asking like any reason not to use web components? Oh, you know, any reason not to know the answer is always no. Any reason not to use web components, I think I can this slide might address some of it. But there's a few foot guns, especially around styling, which all we'll talk about in nauseam. So there's a few foot guns and a few things you have to learn before it like clicks. But for in then there's, but there's really not, you know, a reason I would shy away from them. I'm trying to think of like, but this slide might address some of it if I can continue. Is that fine? Is that so? Okay. I like to say web components are slow like brisket. And in the sense that they are web standards, right? Web standards take a long time to get a new element in HTML takes like 10 years. It's a long time to get new browser features, you know, they can happen kind of quickly, but that stuff takes a long time. So if there's one reason not to use web components, it's because you may want some weird feature, some micro feature like partial hydration. You want partial. I have to have partial hydration. I don't know why I don't know what it means exactly, but I have to have it. Well, that might take a while to have like a full baked in the browser solution. So you may have to roll your own. You may have to find one if you really, really want a certain feature. So it's going to move a little bit slower than hot new framework. JS is going to move a little bit slower. But the trade off is you're building on a very stable foundation. You're not going to get sideswiped by a major version change. You know, there's been a few in the history of coding that didn't go so well, Python 3. So there's a few didn't go so well. So if there's a reason I think not to, it's just your sense of wonder, your sense of, oh my gosh, this is getting better every day might be a bit slower than than it is in something new ish. So does that help answer the question anyone? Yeah. So it might be worth looking at like, who is using web components? I found this list of no-name companies over at our web components, a thing yet.com. You know, some fruit company, a rainbow letter company, a shipping truck company. Hey, I don't know. A company that makes a solitary game for your computer. These are just no-name companies. I'm kidding. A lot of these big companies, Apple, Google, Amazon, Microsoft, GitHub, YouTube, Adobe, talk about that NASA. There's web components in space. Why not? IBM, Red Hat, ING, Salesforce. These are big companies, right? They're all sort of using web components. Web components are actually on the rise. And over the last year, we actually saw a jump from about the 10% to about 18% of all page loads in Google Chrome are using web components. That's a shocking figure, you know. But if you think of something like YouTube uses web components, that's going to be a big chunk of page views. GitHub as well. You know, what caused that jump? We don't know. I mean, I talked about web components like just before that jump. So I'd like to think I had, that's the Dave Rupert bump. But I think the true answer is maybe this. Wordle. Wordle, which sold to the New York Times for seven figures, is made with web components. And you can crack open the browser and view the source. And guess what you'll see? You'll see game dash app.  So Wordle built on web components. And there used to be a little bug where the solution was in attribute in the component. So you could just look at the attribute and solve it instantly. But we don't cheat, right? We're not cheaters. I obviously did not do very good this day. So Wordle's built with web components. But that's like, you know, a toy game. That's not a big deal, right? Tiny game. Very popular. The new Photoshop is built with web components. So Photoshop's moving to a web-based client. They built it with web components. And there's an article here on web.dev. Yes, question. Yeah, would you say that these companies are using frameworks to compile down to web components? Or do they usually natively just write it in web components? So in this one, that's a good question. Are they using frameworks? This is using LIT, which is more like a library than a framework. But it's using LIT and just to almost bring syntactic sugar to the component system. And behind the scenes, there's a whole bunch of wasm web assembly happening. And that's doing all the image stuff, image compression. A lot of the graphical processing is happening on a different thread in wasm. So that's a whole other front-end master's course I'm not qualified to teach. But it's kind of a cool thing. So they'll maybe write something in Python or C or whatever they were writing in before and compile the brains down. But the web component is just talking to the brain, the binary file inside. Does that help me answer your question? Okay. Yeah. So Photoshop being built with web components. And so if they're so popular, why am I not using them? That's a good question. I have big opinions. I think they're too low level, first of all. And we'll see it here. When you start using a web component, you're like, this is not fun to write immediately. And that's because it was designed for framework authors to build stuff on top of. It was sort of a low-level primitive in the web platform for people to build on. However, the framework authors didn't use it. So they had something that worked. And for them to be like, oh, I should move from something that works in every browser to something that kind of only works in Chrome, that's a pass. I have customers. Totally fair. And then you pile on some social stuff. There's a bit of heavy-handed advocacy from Google. I'll put them on blast. Like Polymer and the AMP team if you want to keep making money, you should use these web components. Not quite that level. But there was a bit of like shaming like, oh, you need to be using web components. And they're like, I can't. It doesn't work for me. And so there's social stuff, Twitter. Basically, it's Twitter's fault. And then there was some confusion about HTML imports. I talked about how they were killed off by Mozilla. I'm still not mad. Yes, I am. It sort of left the future. Like, what's going to happen to these if one of the four legs of the stool got kicked out? Does the stool still stand? And then, truly, web components didn't land in all major browsers until 2020 when Edge switched to Chromium. So we had to literally kill a whole entire browser rendering engine to get ubiquitous support in all the major browsers. And if you look at the history, you know, 2011 was when they're sort of pitched as an idea. 2013, stuff starts showing up in Chrome. 2016, Safari gets like the V0 implementation. Firefox didn't get it until 2018. They had a big overhaul of their whole entire rendering engine. And then, you know, Edge didn't get it until 2020. So if you weren't using web components before 2020, yeah, that makes sense. You were probably an early adopter, which is why now I think it's a really great time to start looking at them. Yes? As someone who's using web components in production, can you speak to Safari's support at this stage? I've heard in the past, I don't know if it's fun, you know, that they support some, but not all aspects. Yeah. Yeah. So there is like a tension, right? So it's very Google-led, you know, but as like I showed, like Microsoft's now getting involved too. So I think there's, but they all commit to the same browser engine or they influence the same browser engine. But historically, Safari has not jumped on the new web component proposals. Just, who knows why? Apple, it keeps things pretty tight to their chest. They don't really broadcast what they're doing. They don't, you know, they just kind of show up one day and say, you made an element or a new CSS animation thing that you can use. So I think like historically, but I do think it is getting a little bit better. Like I know, I personally expect the speed to go up, but there's a few things I can show you that are implemented in Chrome, but not in Safari. And they would be cool if they were in Chrome or in Safari, but they're just not. So stuff like declarative shadow DOM, I think element internals and stuff like that. So. But those tend to be like nice to have in terms of web component usage as opposed to like, yeah, template just isn't processed by WebKit or. Right. Right. There's no, I think there's no game breaking features. I think I could be wrong here, but I think they support the V1 spec entirely. I think there's now a V2 sort of like additions that, that the places like the community group or, you know, web components, back authors, they want included. So I think there's stuff like that. So, but they're, you know, to be fair, a little heel draggy on it. So, and we don't know why. Why would these guys, these companies use web components? Does anyone, does anyone notice anything about these companies that a commonality? It's a question and question and answer time stumped. Consistent brand. That's good. That's good. They do. They need a consistent brand across like multiple properties. Right. They're not working on like one app. They kind of have a lot of things. For me, it's like, these are all big. Right. They're all very big companies. And, you know, they, their design systems have to go more places. Right. They don't just have the react app. They don't just have the view app. They don't just have the spelt app or the anger app. They have like the old rails app. Right. They have the crusty old Java app that just barely works. Who knows how it works, but it still works, but it, it still needs a UI, you know, they have the WordPress site. Have you tried to put react inside the WordPress? It's not the superest, funnest thing. You can do it technically and like decouple the head and stuff. But, you know, not the easiest thing to stuff a react build process inside of WordPress or the Laravel site. Laravel is a really great PHP framework. You know, it works very well. Like, do I have, just to have components, do I really have to like decouple a whole front end just to, just to have components in my UI? Web components sort of just gives you the ability to not be whole hog invested into a single framework, if that makes sense.  And so you have to basically re-implement all those components into another framework. I heard somebody recently call it the like million, like million dollar button or something like that. Just spend all this money to like rebuild something in another framework. And then you have to have like tests that match and stuff. Web components might be a way to skirt some of this stuff and truly like, is it this, okay, I'll talk about it later, but different, different frameworks, JavaScript frameworks have different levels of support for web components. So you may find that your web components work inside your view app, they work inside your spelt app just fine. And you can use them without re-platforming your whole spelt app. So maybe a way to like increase your distribution without like breaking your neck in the process. So, all right, let's recap and then we'll take a break. Web components are little bundles of HTML, CSS and JavaScript. They're your Lego, they're your component. Web components are a set of web standards. There's the four web standards, template, custom elements, I'm blanking, shadow DOM and import, yes, modules. Web components are growing in usage and big companies are using web components on big apps like Photoshop and Wordle. That's the biggest cell I have for you right now. So on that note, if there are there any questions, we can do a quick round of questions if anyone has them and then otherwise take a break. Yes, sir. You were talking about how web components can be used across frameworks and I've heard that like React in particular, they're kind of difficult to use with and I primarily use React, so I was wondering if you could speak to those difficulties if you know about them? Yes. Yeah, and so there's a site. This little custom elements, oh gosh. This does not bode well for the live coding session. So, custom elements everywhere. This basically ranks or runs a set of test suites against frameworks and React is like the notable outlier. This number has actually gotten a lot better in the last year, but it deals very specifically with how React treats everything as a prop, right? Like attributes and everything's a prop. You can just dot, dot, dot props and they all just splay out into props. HTML, props and attributes are very different things like your ARIA selected attribute in the canonical HTML sense or your image source is different than whatever, what would be like a property on an image. I guess some custom image thing you would want, I don't even know, how many clicks or something? A size, X, Y or something like that. That would be like a, I guess like a prop on an image, right? So, React treats everything like a prop in HTML, in HTML, props and attributes are different. But, sneak preview, there is an experimental branch of React. It's, and we think React is saying maybe in React 19 that is going to support web components. I think it's a slightly different syntax on how you use props, you know? But, I don't, I think it's like if you have to support it, you totally can. And I've heard there's, I've heard it's pretty good. So, people who have tried it out. And then there's one other thing I could point you to. Lit.dev has a labs section, okay? And they have a wrapper for React. So, you basically just import your React element, put it in this create component wrapper instead of just returning JSX or whatever you do. And then you maybe have to supply like, here's what the custom element is, here's this, and here's like the initial state. It's a little more involved than just the custom element defined. But, yeah. So, there's this wrapper. So, if you have a system in React right now, and you wanted to move to Lit or just offer a web component version, you might be able to consume your existing React components using this. Like, you just make like a, I don't know, a sidecar to your React system that offers web components. So, might be an option, something you could build out. Your mileage may vary. You know, it's, you're doing wild stuff. It might, you know, not work. But, in theory, the React API is very strict. It's just a few things. So, hopefully it should work. So, yeah. So, that's kind of it. So, maybe React 19 is kind of the TLDR. So. We kind of touched on browser compatibility. Have you noticed any differences between desktop and mobile browsers of support? You know, the big thing is probably, like, Chrome on Android is always going to have the latest greatest, I think. But, it's, the limitation would probably be, again, like, mobile Safari. Particularly in the U.S., where mobile Safari is a lot higher than like the global average. So, if there's like a feature you're like depending on it just, oh no, you know. But, you'll see kind of through like the next section, a lot of the, there's a lot of progressive enhancement to bring back an old idea. There's a lot of progressive enhancement possibilities with web components. And, it may not be a huge deal. So, that's kind of maybe, like, you can dodge a few bullets if for some reason a browser doesn't support. But, you know, there's, I think, yeah, mobile Safari. And then Samsung Galaxy, I think, also locks their version of Chrome. The Samsung browser is locked a few versions back. So, you may, if you hear something's out and then all of a sudden it doesn't work in Samsung phones, that's kind of why. One person's asking if web components increase the file size significantly, but you kind of talked about that being the entire point is that it's built in the browser instead of all this overhead. Yeah, exactly. Yeah, it's going to reduce your file size quite a bit. And, I'll talk later. But, you know, where React is like a 30 kilobyte, just React. React React DOM, which you kind of need for React, ends up being about 100 kilobytes. Lit is, I think, 7 kilobytes. So, and it offers a very similar API.   So, people can write bad code and it can take a lot longer. Yeah, we're going to, we'll kind of explore different ways, but it's not just file size. There's, you know, other reasons you might actually want to use React. Okay, we're going to start talking about using web components and styling them and writing them.  We're actually going to start at a bit of a different level. We're going to start with the less chaotic stuff first. Start with, like, just how do you use them in HTML? And what does that look like? What does that feel like? How do you find existing web components so you don't have to write your own? Stuff like that. Start at a pretty, like, I guess, high level. But then move to the next layer of how do you style them. So, that's the phase two. And phase, because there's a few foot guns in there. So, if you start, like, on the JavaScript end, I find when you start, you know, you start using them and you're thinking, like, I'm doing really good. And then you get to the styling part and you're like, I am not happy right now. So, just because there's different, it's the Shadow Dom's fault. But then the, you go to the last level for me is sort of the, like, kind of chaotic JavaScript realm. And then we'll spend quite a bit of our afternoon there, just kind of planning out the course here. So, that's what it's going to be. And we're going to start with HTML and kind of finding components here. And I'll be really real with you. I've been a little bit frustrated with the state of modern web development. If I'm not telling, you know, you want to build a web page, but you have to, like, install all of God's earth under your computer, gigabytes of node modules, just to build a web page, you know. For me, that creates a feeling of, I don't want to be this nostalgic human, but maybe I am, where back in my day, I used to dial up into a website, you know, that's all true. But for me, it's just sort of this, like, ease of use. I feel like I have to be a computer scientist just to build a web page first, you know. And so, I kind of want to, while we can still be that and do that with web components, I kind of want to start at, like, a different angle. Like, what if we could make interactive websites and all that cool stuff without installing that bunch of JavaScript? You know, this is the Guardian, you know, it's a newspaper. Have you seen these things where it's sort of the, like, photo slider, where it sort of shows, like, before and after. This is after the 2011 tsunami in Japan. Usually, they're used for disasters or wars or very tragic things, but for me, they end up being this really evocative form of storytelling, like, wow, there was a boat on their house. That's kind of, I've never seen that. That's how high the water got. If the boat is on the house, the water got higher than the house. These are just really evocative ways to tell stories for me. And so, it's very interesting to me when I see these before and afters and I'll, you know, dig into every pixel, you know, and kind of see what's all changed. While I find them super cool, I never want to code one. Like, literally never want to code one. You're talking touch events, pointer events, absolute positioning images that could be whatever size possible. It's got to be responsive. It's got to work, like, I could code this. It might take me a week, two weeks, I don't know, to, like, fully test it on all the devices. And then I roll it out and then I'm getting bug fixes, bug reports for the next 10 weeks and stuff like that. So, I like, don't want to ruin my life by coding this on my own, even though I feel like I could. I'd rather use somebody else's brain here. And I can. So, 2UP is a, it's a repo from Google Chrome. Google Chrome kind of made this and I'll show you later in what context they kind of made this, but it basically, it creates that whole effect of the boat on the house in about five lines of code. And if we kind of zip in here, you have a 2UP element, that's the custom element. And inside we have a div with an image, that's your before image, a div with an image, that's your after image, and then a path to the script. And this is, I think, coming from, where did I put it from? Unpackage. I just yanked it off of Unpackage.  That's fine. You can install it to your computer if you want to do that. But what a great way to kind of prototype something. You know, I didn't have to install all of God's Earth. I didn't even touch the command line. And I kind of have this little interactive experience just from doing nothing, except writing, you know, about five lines of HTML and stealing images from the Guardian. I apologize. It's for educational purposes. And then, you know, there's, you can style it too. We can talk about that. But, you know, they offer a way to like, kind of style it and customize it too. And the result is like pretty convincing. And, yeah, so this is like literally one of my favorite. I think we're using it on our like portfolio site. My designer coworkers were able to get this up and running, which is nice, because I don't have to do much to support it. So pretty good. And, you know, if the JavaScript failed, let's say this Unpackage goes down. Oh, no. Guess what happens? It's an image on top of an image. That seems pretty good. No one's going to complain. Oh, IE 11 doesn't support web components. Image on top of an image. Ship it like complete. Done. Right? That's all you need to know. I feel like it's a pretty good fallback plan as well. Here's just one dumb one I made the other week. You know how you can see these HTML tables? Well, maybe I should say this, like every database software is like, oh, I'll read in a CSV. Yeah. Right? I'll read a CSV. And then, but in HTML, we're like, oh, no, you have to write table TD, TD, TD, TD, TD, TD. You have to write this like really gnarly syntax and they get data out. Oh, yeah, you have to like copy each one and paste it into an actual spreadsheet. It's not super fun. So I just made a little like thing and I'm just going to go to the debug view. But I made a thing that like I can like do this and I can whatever numbers. I don't know what's the spreadsheet. But I can do this or maybe I should just do like a like text edit or what's the one that's so that is a Mac. And then I'm just going to do new document. Here we go. But then I can what's the T, command chip T to get the actual thing. I can just like copy that. And then look, I have a CSV right there. And like all I'm doing is just wrapping in a table with like my functionality. And the JavaScript kind of doesn't exist. But then I was like, let's take it like a step farther and maybe you could just download the CSV and then like I could open it in numbers. Yeah, look at that. Pretty cool. Like I don't know. It's a toy. But it's just something you could do. Now I can just put that on every table I want. And I don't have to, you know, manually build stuff out over and over and over. Your mileage may vary, but I'm just kind of showing you like you can basically supply this functionality and then, you know, provide an easier way for somebody to like add superpowers. They didn't have to like query selector with jQuery or query selector all and bind something to something. You just wrap an element and you get some superpowers. So pretty cool. And then, you know, if you want to, I guess we could go to like the, if you wanted to look at some of the code, but yeah, copy table around a table. And I'm not accepting bug reports. I know you want like a seven column vertical and nested tables. I'm not supporting that quite yet in this code pen. But you know, it's just kind of interesting.  That's fine. And then I have some styles and, you know, to get the thing copied a clipboard. I'm just doing that. And then I'm spitting out some SVGs, buttons and stuff like that. Pretty, I don't know, pretty, pretty simple component that adds some superpowers. Here's one I'm passionate about. I have big opinions about podcast players. I host a podcast. I just, your podcast player needs to have a speed changer, right? 1x2x? Any 2x fans in the crowd? Yeah, no. Okay, good. I thought we were just only normals. But you have to have a speed changer. And then the other critical thing for like a podcast player is that like 30 second rewind. Oh, I heard something interesting. I would like to like rewind it 30 seconds and hear a little bit more hear that one phrase again. And so I made here, I'll kind of go go in big in this. So I made a web component that will take your it looks ugly, but that's on purpose. But I you basically pass it a native audio element with the controls attribute, and you wrap it in podcast player. And like, let's look at it like, let's say again, the JavaScript fails. That's the native audio element. I'm not inspired. I'm not. I'm not moved to hit play. You know, it does have some features now like playback speed. That's a pretty new one. I mean, it's not doing well inside that iframe there. But but it is something that exists. You know, so if I but if I put it in my podcast player, and then I can like play pause, I can jump forward, I can jump back, I can change the speed, and then it'll like keep getting faster. You probably can't hear that audio. But it just like it's going to speed up. And just like you'd expect for a podcast player to do instant mute in case like, Oh, my kids are trying to talk to me. And then like this range finder just to find where you're going in the podcast is pretty cool. And then there's even some like a secret stuff in here that we've kind of baked into maybe not this version, but I have a version of this over on the podcast, the shop talk show podcast player. And this is it fully styled like we brought some of our own styling to it. Yeah, you can just steal web components and add stuff to them. It's pretty easy. Didn't take much. And it's just working.  And that's all based on the pod love spec. Thanks to them who helped me implement all that. And so, yeah, so it's kind of like you're adding superpowers to this.  Another one came from Zach Leatherman who works on 11 details, you tills. If you've ever used details element, who's used the details element is relatively new. Okay, yeah. So if you've ever used details element, it's maybe the coolest new interactive element in HTML.  It's very cool. But there's a few problems or just, you know, it lacks some features or maybe it's more apt to say, I want to use this everywhere. I want to use this in navigations, drop down menus, you know, I want to use it everywhere. But there's a few features. Adrian Roselli, yeah, this, this post sort of shook my brain. But Adrian Roselli is a accessibility expert. And he said, had this post called detail summary are not insert control here. And in the post, he says, you know, they are not in accordion. And I was like, wait, what? Why is it not in accordion? And I wrote a whole blog post on that.  You know, and he goes on, he kind of points out like, a, it's kind of just a bad pattern just from accessibility, like, but, you know, purely they lack the ability to hit escape on clothes. Right. So if you have a details on it, and I hit escape, nothing happens. But if we go to our details, you tools, I can, I can wrap it in the details, you tools here. And then I can add some behaviors like close to click outside. Right. So if I click outside, oh, I have to get my browser real big, let me go in big in this again. And so if I do this and I click outside, oh, do I have to go bigger? No, what's the zoom out? There, I'm bigger. I'm big enough. I finally made it. So you can close the click outside if it's over 48 m. And then another feature has closed on escape. So if I open my demo, and I hit escape, it closes. Tada. I now, according to Adrian's post, am safe to use it as a drop down menu in my main navigation or something like that. That's pretty cool. Zero lines of JavaScript. For me, Zach wrote some, but it's probably very minimal JavaScript. Animation. I don't know if you've ever tried to animate a details on it. It's not fun because you have to like measure the height and then like do an animation between a known height and a non known height. You know, the default details kind of looks like, or let's see if I can save this and the default details kind of looks like this on off on off. Not very cool. Doesn't pass to your designer's sensibility. So you put animate on there. And guess what? Now we are cool. And our boss will give us a raise because we are wowing with surprise and delight all by just wrapping a details element in a sort of a utility element outside of it. Pretty cool. You know, I'm using sky pack. I don't know if you've used sky pack, but you can just go to sky pack and look for sky pack.dev. You can look for whatever package you want. Somebody name a package. I don't know. Like a gulp babble is the one I had to look up. Gulp babble? Yeah. Okay. Oh, bane babble. Yeah. So you can get gulp babble here and you can just import it into your JavaScript like as a module right here. And it tries to like module, fi whatever it can. I think that's sort of a tough science with all this like legacy require code. But if you're in your, you know, writing a node app, you could kind of require it from the CDN. Again, your banking software probably can't just import from an untrusted CDN. But I tell you what, it's really great for prototyping out an idea very quickly to see if it's something you want to even get started on. So pretty awesome way to do it. So details, details. I kind of just found it and came out I think this year. So pretty cool. And I plan on using it kind of more going forward. I know what you're saying. Like we just added some accessibility features. Wouldn't it be great to have a bundle of pre made accessible components that I could, you know, style on my own without having to install all of God's earth just to make some tabs on my website. Yeah, that would be cool. That's the goal. That's the goal. That's the utopia. We just have things. I just want to have things. Generic components by Pascal Schilp is a really cool library. I came across. And it's maybe one of my favorite kind of collection of web components, you know, they're sort of like, this isn't really a design system.   Let's go over to my example because we can read this code for my tabs. The code here is pretty awesome.  You know, that's sort of depends on your situation. But we have a button and we're going to slot that into the tab slot. That's named tabs, right? Or named slots. Again, I don't use this feature that much, but, but in tabs, you have buttons and panels, right? You have tabs and panels. And so he has two slots, you know, an about and a contact. And then, you know, then you have a panel and then you have another panel. And you can slot stuff into the right slot.   Because, you know, let's say the JavaScript fails or whatever again, we're talking progressive enhancement or let's say I wanted to turn off tabs at some point. What if you wanted like progressive enhancement? Well, you could like just have normal content. And then it just rolls up into some kind of tab structure. Interesting to think about. And that's kind of an idea, like kind of an idea, me and a group of people called the tab vendors, you know, whatever, the tab vendors, we're part of open UI, open dash UI. We're part of open UI. And open UI is a group of, let's call them component enthusiasts. It's just a community group. We can't actually propose anything for like legal reasons. But we're a group of component component enthusiasts from browsers, from spec authors, from ARIA, accessibility experts, CSS spec writers, and normal, like, podcast hosts like me, we all come together. And we talk about like components. And we're kind of using this, this big component matrix, like we surveyed something like 18 different design system and try to find the most common components across design systems. Well, if you look at like number five is tabs, right? So tabs is one of like the fifth most common element behind button and menu and tooltip and a checkbox, most common, fifth most common control. So we've been experimenting over here in spicy sections. We're calling it spicy sections. And we sort of realized, you know, we sort of realized, if you have tabs and you have that like well structured content, this is just the idea. We're not, this isn't something coming out tomorrow. But if you have that well structured content, you can make tabs. But you know what else you can make? Like an accordion. You can make a vertical tabs. You could make an accordion where only one panel shows that time, or they can all open, close stuff like that. Maybe, I don't know, maybe even a carousel? Is that kind of a tabs? I don't, well, we're looking into it. We're trying to figure this out and just see what is going on. Just see if there's like a way to express a control that fits with everything. And so here's sort of the canonical demo. We'll start like in the mobile viewport. You have an accordion, right? And then in the medium viewport, you just get, you're going to get normal content. Just like that weird tablet viewport where you don't know what to do, where an accordion is like too much collapse and you don't have enough room for tabs or, you know, it's just that weird, it's a weird place for websites. It's like the teenage years for websites. And then you go to like all the way out, and then it turns into a tabs control. And so this is just an idea we've been experimenting with. There's a few other demos, you know, that I could show you. But it's just kind of an idea we're experimenting with and kind of seeing if this is maybe a pathway forward for a tabs-like element native in the browser. So kind of cool. Don't know. And it may rebrand to panel set soon, so keep an eye out for that. Not sure if that's the official name, but that's just sort of something we've kind of been riffing on in terms of this. Yes, we have a question. On Shop Talk, you and Chris mentioned doing a circular menu. Was that tabs as well? Oh, like a radial? Yeah, that would be tabs.  You know, there's like these kind of radial menus, and then you'd like choose an option, and then it drills you down or shows you content from within that option. Are those just tabs? If the old Xbox 360 UI that had these like vertical blades, you know, is that tabs? It might be tabs, you know. And so, you know, I think with, as we've kind of investigated tabs, it's a long story. But, you know, there may be a point where you graduate from the standard tabs, and you have to make your own custom tabs. I think my favorite one was where one of the tabs was a phone number, and you could click it and call somebody's grandma or something like that. It was, I think it was like in Salesforce or something. So, you could like call somebody from a tab. That's probably not making it into the HTML final spec. But, you know, there's, it's interesting to think about like what is a tab and what is not. And then even, you know, we've gotten some feedback like maybe it doesn't, you know, maybe there's tabs for a whole page, like for a whole application, and maybe there's tabs for inside the content. Maybe those need to be different tabs from an accessibility in like aural announcing standpoint. So, lots to think about. Again, the stuff's slow, doesn't make it fast, but it's fun to play with. And actually the spicy sections has been a really great tool for discussing web standards or potential web standards, just because it's a prototype. And y'all probably, everyone's probably had that experience at work where you just show the code and or show it living in code and suddenly people's opinions change. There's kind of, once they, you know, some people don't react until you see it. And then they're like, wait, wait, we have to stop this. So, or they're like, oh, wait, we have to, this is good. This is bad. Let's do this. Let's tweak this. And so, it's been a really good talking point. So, and that was all kind of started through generic components, which I shouldn't mention, they're all coded to this Y-Aria authoring practices, sort of, I guess, tutorial guide. You know, you wouldn't know this, but this page on the internet is basically the holy grail for like telling you how to like code something and what the expectations are of that unit or, you know, a menu button, radio group, what it is, what it is and tabs. This page should be at the front of the internet or the front of the guidebook you get when you get a new job. But yeah, so that's a very handy little library. Again, your mileage may vary. Maybe you want this, maybe you don't. But this is just a starting point. Maybe you want to go a bit older, right? You don't want this new stuff. You want the old stuff. Well, my friend Alex has you covered. Alex has this thing called GeoElements, which is re-implementing deprecated web 1.0 tags in custom elements, you know, like the blink tag and the marquee tag. But he's doing it in like an accessible way, which is, you know, these things didn't have the greatest accessibility. But you know, if you want to like prefers reduced motion, if you want to like reduce the, ah, better, right? Now we're not getting motion sick. I probably should have given a warning before that. But yeah, so like you can turn off the blink tag if you prefer reduced motion. It's hideous. Alex makes terrible things. But you know, your mileage may vary. It's all in a GE background, which, you know, the old background BG tag or what you could like BG color and stuff like that. And we have a font tag and we have a marquee tag and a blink tag. It does everything you want from a GeoCities aesthetic. So if you're building GeoCities sites still, Alex has you covered. None of these work in the metaverse. I know we've been doing two dimensional websites. How boring. Let's go into the far future. We saw the past. A-Frame is a library from the, I guess, the old Mozilla Firefox reality team did a lot of work on this Chrome team, like the Chrome Daydream VR team did a bunch of work on it too. But you're able to build 3D scenes in the web browser. Kind of cool. I'm just using my WASD keys to walk around my 3D world I invented here. And the API is pretty cool. What's in big in this because we can? Oh, we want HTML. See, no CSS, no JavaScript, no CSS, no Java. We just have HTML. And the API is pretty cool. We have a script tag. We go to A-Frame and we create a scene. And inside a scene is a sphere. This guy. It has a position in 3D space X, Y, and Z. That's confusing. And it has a radius 1.25 meters, basically. Because in VR, size matters, I guess. You can't say it's 18 pixels. You reference things in U's or meters. And we give it a color. And then there's also a box which has position. It has a bit of a rotation width, height, and depth. And we have a cylinder. And we have a plane, not an aeroplane, but a two dimensional surface, a plane on the bottom.  Like I think it's 90 meters or more.  So, and the A scene gives us the camera and everything like that. And we can kind of even control the camera height. Like if you're not 1 point, I think the default is 1.6 meters tall. So if you're not 1.6 meters, I know every American here is just paralyzed with not understanding meters. But if you're not in America, you understand it just fine. But the neat thing is, I'm going to click this VR. And if I was in a VR headset, I'm in the metaverse. Like I enter the metaverse. But here, because my computer in this PowerPoint does not support VR, we just get a full screen 3D scene that we can walk around and see kind of, you can even go in the sphere. That's weird, but clipping. So that's it. That's kind of an interesting thing. Like you can kind of build 3D experiences. I, Dave Rupert, do not know how to code WebGL. I do not even know how 3JS works. This gives me a declarative API to use 3JS without any of the, I guess, troubles or worries. And so I can build things. I've built tons of things. This is kind of my list of shame here. Oh, there's my profile. I wasn't expecting that. We'll go to collections and then I think I have, oh yeah, I was trying this like 30 days of WebVR. You know, like I was like, you know, could I just be on Mars? And yeah, I could. I took this like 3D photo from a rover. It doesn't look good, but it looks pretty good on a Google Cardboard. It was all right.  This one is a whale that you can talk to.  I just thought, you know, that would be cool to wake up every morning and talk to my whale friend and he dispenses agile advice to me. Yeah, it's just beautiful. Blends with the speech synthesis API. Just amazing. Really, what's possible? I can't make cool things, but you can. And I think that's good. I'm really excited for what you're able to do building your own 3D worlds in the metaverse. So, all right. And then if you use it too much, the API expires and it starts reading out like cores errors. So, it's great. The future is now. So, web components, right? It's easy as HTML. Great reusability, right?  We can get better experiences, right? I can't build a 3D experience, but I can with web components. I don't want to build that slider thing, but I can with web components. Progressively enhanced. I think we showed a couple of times where if the JavaScript for whatever reason fails, and I'm not a JavaScript, people turn off JavaScript, although like 1% of people turn off JavaScript. I have one friend that turns off JavaScript. His name is James. So, James turns off JavaScript, but most people don't turn off JavaScript. JavaScript does a great job turning itself off. So, if one problem happens, boom, it just says, I'm just not going to work. So, that's okay. So, progressive enhancement, it's not always a requirement for me, but it can save your bacon. It can let a form submit if you do it right. No build tools. No build tools were harmed in the production of this section of the talk. We didn't open the CLI. We just copy pasted HTML from third-party sources. So, you can, of course, get into build tools, bring things locally, but we kind of did none of that. And it's encapsulated my 3D, the styles in my 3D world didn't bleed out to the rest of the page. I don't think they did. But, you know, the styles I'm writing, or the sort of like the button styles and stuff like that for the two up, they didn't bleed out into the rest of the page. It's all encapsulated together. So, that way, you have a little bit of security to know if you change something, the bar stool and the other bars, and going to follow it. So, okay. On that note, we'll take, we'll do some Q&A or take just like a two-minute break. Let's go here. So, you had mentioned about that CSS not bleeding out, but you also mentioned overriding styles within these web components. So, can you speak to how that works out if you did want to overwrite something that's in a web component? Yeah. So, there are a few ways, and we'll talk about it in the next big section, like right after lunch, but the kind of core ways to provide styling are through, there's, you know, you control the light DOM. So, anything that you send in there, like I could have, I don't know, I could have done like hue rotation CSS on those images I passed into the to up, you know, because I control that stuff. I wrote that light DOM. There's also this thing called inheritable styles. I can talk about that later, but it's some styles do sort of filter through, but the some don't. And so, some web components like to offer these like CSS variables because that's one of the things that do go through. And so, variables are kind of one-way component authors offer styling and customization. Does that help? Okay. Yeah, like, anecdotally, or in your experience on the topic of build tools, do you see an encounter people, I'm guessing like transpiling down to, yes, five doesn't happen much because the browser age that is needed for components themselves, but like, are, you know, like is minification typically just like, I use headers to, you know, gzip or what do you see people using for kind of at scale, you know, apps or sites that use web components? Yeah. So, there's actually, there's a little bit of data out there that, you know, minification is great, but broadly compression is maybe like just fine. And it's not, you know, and then there's, there can be the side effect of minification where you aglify script A and script B, and they're both trying to call function C and boom, a problem occurred. Isn't that what the browser says? It messes up big. And so, there's a, I think at scale, people are doing the bundling and minifying, but in web component land, and this takes a bit of reprogramming, that's all a production level concern. So, it's not the development environment, it's not the, it's, that's a production problem, like the bundling, minification, asset, sort of splitting, tree shaking, all that, that's a production thing. And, and what's nice, good and bad about that, it's bring your own. So, we don't like that as developers. I think, for me personally, I'm like, oh, I have to code that. That's not what I wanted. But what, what is also good about it is you, you aren't locked into like Webpack 4. You know, I have a, the project I work on, we are locked into a Webpack until a big C change of other cascading changes happens to enable like switching to ES build or something like that. We'll go into finding web components, right? So, this is, I think like, I don't know if this is unique to web components, you know, but I think in any framework or any anything, you know, like sourcing quality goods, quality packages can be like a challenge. For me, I try to find what the cool kids are using in, in, and so in, I don't know, in web components, you know, what are the cool kids that Salesforce using is probably different than what I want to use personally. No, no slight to the, the great devs working on lightning web components. So there's, I think there's just sort of a difference between maybe what there's not really a big zeitgeist about like, hey, use this, this component is cool, use this, hey, use this. So I've actually kind of taken it on, you know, that's what I'm frustrated about. So I've taken it on myself to kind of collect some of these. So I have a GitHub repo called awesome stand-alones. And stand-alones is a term I made up, no one else says it, but it's basically these components sort of like two up that you can just yank off the shelf and use without any build tools without any, it has an unpackage link and some HTML and you can get going. And I can dig through some of these, you know, how many times have you like, needed to just like a button that copies something to a clipboard, right, you know, you want to just like copy that and copy done. Awesome. I don't want to code that. That's great. A clipboard API is fine, but this one's cool. This one's from Google. It's called input knob. And it's actually in use in your dev tools. I believe if you want to change the hue, you get a little icon, a rotating icon, but look what we're dealing with. Whoa. That's cool. Very manual way to move a slider. And you should probably provide a accessible fallback. Or maybe it did. Oh yeah, it just goes straight to it, but wouldn't be cool if you could arrow that slider. But this is kind of cool. I don't know if you make little synthesizers online or something like that or if you want to like turn up the money bar on your website or something. You know, that's, yeah, money up. Just turn money up. Just keep, tell your boss to keep spinning that until the money goes. Oh boy. Light YouTube. Oh, this, oh, it just keeps getting better. I don't know if you know, but the YouTube in bed, as much as Google loves performance, the YouTube in bed is not great. It does this. It does. That's a flame chart. It basically calls a bunch of JavaScript a lot. So Paul Irish, who works at Chrome, made this light YouTube in bed, which gives you a YouTube looking in bed with like, I don't know. I guess that time is more than the other one. But it loads in like two seconds, milliseconds or something. It made a drastic, like this is it. That's it. It looks like the YouTube. And then like when you click that, it'll go fetch the YouTube, the actual YouTube. But that light YouTube, we rolled it out on shoptalkshow.com on our video page. We've been doing videos. We rolled it out here. Our paid speed went from like 18 to 90 or something like that. I watched it. Like Chris was like, I was running like performance metrics just because I'm dumb. And Chris Coyer pushed out the change. And I was like, Oh, I have like a run right here. I can go compare popped it up like insta boost, like literally in, I don't know, zero lines of code, because we already had the iframe. He just changed it to from iframe source to light in the light YouTube YouTube light or what it would light YouTube in like zero lines of code change and drastically improved our page speed. Web components. Back to the question about performance. Sometimes free comp, free performance. Here's one I really like. Model viewer. It's from Google.  Have you ever done this with your kids? Search for dinosaurs. And then you'll get like a 3d model of a dinosaur.  And you can put the dinosaur in the room or tiger, transverse wrecks or whatever. And you can put the tiger in the room.  I didn't think I'd ever use this feature. But then lo and behold, one day my my six year olds asking me how big is a tiger. And I just was like, well, I know how to show you. So this is a model viewer in the syntax is this sorry about this contrast here. But the syntax is pretty easy. You have an alt attribute, just like an image. You have a source attribute, just like an image, except it points to a 3d model glb gltf. There's a few different types of models it supports. In a 3d model is really just a folder of files. There's the wire mesh, and then the like PNG assets that go over it. And this one's maybe from NASA. It's like the actual render of Neil Armstrong's suit. And then, you know, AR modes, Web XR, these are all very specific environment image poster. So like when it loaded, it showed something, but it didn't just show like a blank screen. Camera controls, enable pan, that's what I'm doing here. You know, I'm moving it around. Yeah. So what I like about this is, again, I do not know how to code 3d stuff. But with web components, I look like I do. And I can build that IKEA furniture thing, where you put IKEA furniture in your house using web components. I didn't have to go to computer science school. It's great. So there may be, you know, your mileage may vary, it may get trickier. Pinch, zoom. Here's another one. Chrome labs. I'll let you kind of click through more after this, unless I see one more. But you know, pinch, zoom, man. You ever wanted to just add pinch, zoom to a website? Not the funnest thing, because the whole like browser tries to zoom, and then you get locked into the image, and then it's just a not fun pinch, zoom. And you might say, oh man, pinch, zoom, and two up. Those seem similar, and they're both from Chrome, right? Have you ever used Squooshop? Squooshop is a pretty cool, like, a way to image process. And it's using kind of the wasm stuff to like, you can like minify your images, browser PNG, you can resize it, you can, I use this all the time, because I don't like using Photoshop, but you can even get like a WebP out of here. Avif is the new one, and it has like the smallest file size. You see the file size there, but look at that. Pinch, zoom, two up. View source, elements. Oh, let's go dig. We're digging. File drop? Uh-oh. A way to just drop a file on a page? That looks like we use that. Snack bar, that sounds delicious. But let's just get two up. Pinch, zoom. Pretty cool, huh? You start to see how like, this is just HTML. We're just stapling components together, nesting them, layering them, and we're like adding these behaviors to build this like image minification app that then connects to image minification binaries on the side. I'm not going to say it's easy. I mean, these are like Google people making this, so it's very advanced, but pretty cool. And then there's like tabs, task list. I'll do this one. This is from GitHub. You've heard of GitHub?  Yeah, that's like literally this. So you can just do tasks and slide them around. It's a web component. GitHub uses a lot of web components. You see them kind of all over the place. A dark mode toggle, K-Tex display. Who likes math? If you like math, that's your one. HTML includes, wow, a way to bring the most ultimate feature back to the web. Like it's like a PHP include, but with HTML. Awesome. I love it. PWA installed. I'm just going to promise myself I wouldn't go overboard here. If you have a PWA, I don't know if anyone has anyone here have a PWA? No? Okay. Well, another course then. We'll do another course. PWAs are a great way to basically add a native feel to your website. It's two pieces of technology. A service worker, which is basically a way to manage cash. You just say, hey, browser, I'm going to store some stuff.  An intercept request. Then you have a manifest, which is like all your app icons, stuff like that. Just use this icon for this. The short name is this. When you launch it from the home screen, do this. What happens is in Chrome and other browsers, if you use a website enough on mobile Chrome specifically, instead of saying download our app, it'll say, hey, you use this. It has some heuristics and it'll say, oh, you use this enough. Would you like to install it to your home screen? You click yes, you get an icon on the home screen and you launch it and it launches like an app. It can even remove the browser Chrome. So yes, we have a question. We do have a course on PWAs by Maximiliano Fertman. Oh, excellent. Fert, yes. He's like probably the guy you want to talk to about PWAs. So anyway, it launches like, it's basically a native field. And to the extent Microsoft for their store, you can ship a PWA in the Microsoft store. So if you're a small, scrappy, young web team with not a bunch of engineers to code your dedicated Windows app, PWAs are a great tool for that. And so the people at Microsoft who run PWA Builder account, they have this install prompt and you can get this like, it'll pop up on desktop when the before install prompt event fires, you can intercept that and get these, this beautiful, I don't know, app store like, hey, do you want to install this application? Kind of cool. Again, your mileage may vary, but I think you'd impress your bosses. So anyway, awesome stand-alones, you can check it out. Pretty cool. And then on the other end of the spectrum, not the one-offs, there are whole design systems built with web components, lightning web components by Salesforce. If you build, if you're building Salesforce apps and stuff like that, integrations, you probably come across this. Lion by ING Bank. It sounds a little weird to use like banking and software's design system, but this is actually really coded to be extended and modified. So it's a really good base if you want to kind of build your own, I guess, banking grade, enterprise grade system. So you're going to have a lot of accessibility and stuff like that built in just through the requirements of banks and stuff like that. Pattern fly elements from Red Hat. Again, very good, very robust. Fast is a new one from Microsoft. It's kind of doing their Fluent UI. It's their take on Fluent UI and web components. Spectrum web components by Adobe. Spectrum is their design system and web spectrum web components is the web component version of that. I think this is what is kind of powering the new Photoshop UI. Ionic framework by Ionic has, it's a really great tool for prototyping or even shipping mobile apps.  Great. It's going to give you the mobile tab bar with five icons right there. Really awesome. I've used that in the past for companies. I can tell those stories. Shoelace is another one by Corey Leviska. What's interesting about this, and this is foreshadowing the JavaScript section. Recently, Corey, like he started writing this out in JavaScript in like in his own like vanilla JavaScript and, you know, and then you find an abstraction. So you kind of like pull some code out, reuse it, and lo and behold, after a while you kind of have a little mini framework, right? We've all done that.  And so Lit is another, so he converted that whole library of components over to Lit. It's built on Lit now. And he's seeing some gains just from a usability standpoint. It's faster, smaller, better, more robust code. So yeah, so that might be one reason like where frameworks are like a good choice. But yeah, so built with Webcombone. So you can browse these and see if there's anything is interesting there. The Fast by Microsoft stuff, maybe I'm a Microsoft fanboy, but they have a, it's very interesting just from like, I didn't expect them to buy in, but they bought into Web Components and they're kind of doing some cool innovative stuff there. So okay, are we ready for our first coding challenge? Okay, the first coding challenge, use a Web Component. That's it. Open up a code pen, an HTML file, and your local computer. Find one, you can pull one from awesome stand alone. You can pull one from Lion Web Designer, whatever you want. I've given you a whole bunch of my favorites. Your job in the next 15 minutes, I know you're sweating. It's going to be down to the wire. Find a Web Component somewhere on the internet and use it. Try and use it. There's even some cool ones. If you go into the pull request for this awesome stand alone, there's some year old pull requests I haven't merged in there. So there's really good options in there as well. So yeah, I hope everyone had fun making your flagship main and voyage building Web Components. I hope it's great. I hope somebody has some, if anyone has some cool ones you want to share in the chat, but I can walk you through what I did because I used one I'd never used before. So if that sounds good to y'all, I'll just do that real quick and kind of, I don't know, we can talk, people in the room maybe here saw it, but we can, I can talk about some of the challenges I had figuring out what was going on. But where's my awesome stand alone, right? So I went to my own repo and I found an old pull request for scroll shadow and that sounded cool. So I clicked it.  I think people use it a lot in like nav overflow patterns like, Hey, there's something to the right here. Keep scrolling. Um, so it is a tool that kind of like adds that effect. And there's a cool demo here. Their demo is arguably better than mine. But you saw it can maybe see a little shadow peaking through here. A little shadow peaking through here. And then when you scroll, a little shadow shows up here. It's probably too, uh, too subtle. So I kind of made it a little bit bigger. Oh yeah, look at that. A big purple shadow down here, beautiful ambiance that I'm creating. And then it's up the top and then it's, uh, then it disappears at the bottom. Um, I'll tell you what, this is cool. And I'll maybe use it. Um, I don't want to code this to be frank. Uh, I know it's probably maybe trivial, but, but you have some resize observing. You have some scroll observing. You, you kind of fade in and out that, that shadow. I don't want to do that. So I'm just probably going to use this if I ever need that to create that effect here in the future. And I'm actually like thinking of about 10 places I could use it right now. So, um, looking at this, um, you know, I had to use the unpackage URL. This is, I was, it was not working with the sky pack thing trick I told you all. Um, and that's okay. I think there was just like a compilation error. And I eventually checked the console to make sure I wasn't me, but it was the sky pack was failing. So, but the unpackage seems to work just fine. Um, and then, uh, I have scroll shadow and then they were using kind of a main element to do the like sizing. I had to figure that out, uh, kind of poach from the demo. And then I added my own bill Murray's. And then in the CSS land, uh, I added some image max width and then the body. That's just centering. I guess I could probably just do like place item center. Uh, but yeah. So, and then like it has like a max height on, on that it says height 100 V. So everything inside there is, is not going to bleed out. Uh, but then the demo is only 70 V H. Uh, so it's only 70% of the height. Uh, and it's only 400 picks wide. And then, uh, this was kind of interesting. So this was the scroll shadow. I probably that's like the default sizing. Um, so changing that's not going to do anything. But, uh, what I get here is some of that styling API. We kind of hinted at, um, and I can just change the CSS variables, the size of it. I could change it to like 200. I think I changed it from like 14 to whatever this is. Is it going to rebuild for me? I think it's probably way too huge now. Yeah, it's way humongous. That's okay. We like the ambience. Um, but yeah, so I, you can change all the variables and I changed the color from like a black to a bit more like purpley vibe. So I, I, that was fun. It was really, you know, I did it in less than 10 minutes and I got in effect that last lifetime because I'm probably going to use this over and over and over now that I know how to do it with zero lines of code. So all right, did anyone else do one that they want to share? I was, I was pretty pleased. It's literally just an index HTML, but as not a Microsoft fan, but I went to the red hat one and grabbed the one of their little health indicators. And I wasn't sure whether you could just run like set attribute on one of the various custom attributes, but it turns out you can. So I just, they have a little health index and I just set up an interval to rotate between which one is highlighted and you can do that. So. Cool. So you're just like setting the value or like you're changing the graph or whatever, or like, yeah, based on like a set. Yeah. And it was like two minutes of looking up the library, like pulling it down from, I think, unpackage that they have and yeah, away you go. Awesome. Yeah. Pattern fly is a really pretty good little set of components. So it's enterprise grade vibes. So it's good. All of them are like enterprise. I was going to point out one thing that somebody had mentioned in the chat and it was actually an issue I ran into with the previous exercise of building just using a web component, right? If so, when I, when I first tried it, I had the type equals module missing and nothing was happening and I was frustrated. I was feeling like I didn't actually know web development and it's that's always true. That's a standard, but I had forgotten this, this like one attribute and that sort of caused the JavaScript because it's expecting a type equals module. It's expecting that module behavior. So that because the JavaScript exports a module, it's expecting my script tag to also have the type equals module. Somebody else in the chat ran into that problem and I think they said they once they figured that out, it worked like a charm and that's what we like to hear. Web components work like a charm. So we talked about HTML. Now we're going to get into CSS and if I'm honest, this is one of the most frustrating parts of web components. So I like to get the bad stuff out of the way first or early on because I do think if you find out about this later in your experience with web components, you can, it can leave a sour taste or you feel like they're broken, but, but what it really is, and I don't mean not to be condescending, but what it really is, is it's new and you did not know that and that is fine. We are going to learn and figure out what makes this different. And what what is different about this is it involves something called piercing the shadow DOM and this is simultaneously the dumbest and coolest phrase we have in web development. So we have to just roll with it. We have to embrace it. We're going to learn how to pierce the shadow DOM and if you remember kind of earlier, we had that component, right? Our custom alert, we put in some text, our light DOM and then the web component, the encapsulation creates that shadow boundary around the components HTML that it injects. That boundary is like it is a boundary. Things can go through and things cannot go through, just like we want to protect that egg. We want that egg to not leak out or leak in. So I'm going to do the thing where you just write styles, you chuck styles at the wall and see what sticks. This is the tried and true development practice of just trying stuff until it works or doesn't work. So we're going to start styling from the outside. So we're outside the egg and we're going to try to style stuff inside the egg. Let's just see what happens. TLDR, if you didn't write it, you can't style it. This is just the rule of thumb. If you didn't write it, you can't style it. So styling light DOM, right? So can we style the light DOM we wrote? In my example element, I have a button and it is my light DOM button and the example element is going to inject a shadow DOM button as well. So you'll see I'm saying all buttons, background pink please, right? Turn the button pink and that's how we'll, that's our test to see if it worked. And then you can see here, this is a bunch of code, but we are, this is our shadow DOM button and then our light DOM button should show up in that slot above it, right? We know what in the result is, drum roll please, sound effects team, thank you and tada. So we can style the light DOM. That's our, that's our HTML, that's our CSS. We can style that. I wrote it, I can style it. Fair enough, right? But how would we go about styling that shadow DOM button? You know, I think it's, you know, if we want to style it from the outside, right? So I think it's really the next intuitive thing my brain does as a CSS person is I just say I'll just be very specific. I'm going to say example element button, background pink. I'm laser focused. I'm going to target that button element inside the shadow DOM as best we can, right? So button, background pink, I should probably make that like orange or something, but whatever. We want to turn this example element button pink, right? Same JavaScript and the result is, it didn't work. That's because we didn't write it, right? We didn't write the shadow DOM button. This is confusing. And actually this is like a big, that's the big frustrated graphic from earlier for me. I'm, I am not used to this. As a CSS person, I'm used to full control, right? I can style anything on the page with the right selector. I can laser focus and change and manipulate anything I want, the style of anything I want. I should have that ability, but suddenly I don't. So it feels like it's almost like an emotional problem. It feels like a loss of control. Like, oh no, I was in control of the page and now I'm not. This is broken. The problem is this thing. The problem is not me. You know, it's the kids that are wrong. It's not me, but yeah, we have a question. So, so why is that? Like, is it because of the way the shadow DOM works? It just won't let you, like it doesn't care that you've put CSS on the element? Right, correct. The way the shadow DOM and boundary is sort of, I guess, specced out is that there's encapsulation, style encapsulation.  What if you had, like, buttons within buttons within, or like, whatever, elements within elements, how far down that trees should that go? So I think you have, like, logic problems for, like, does that just apply forever or does it not? But me, as a developer, I would like a tool. And there's actually in the, like, web components community group, I think there's an idea of, you remember how we had open and close shadow DOM, right? Open means we can access the shadow DOM from the outside and close mean you can't. I think there's this idea growing of open styleable shadow DOM. And in the, like, original spec, and that would be actually really amazed if it still worked in Chrome. But there was, like, this row off, there we go. There was this deep selector, which was kind of like, go deep into this component and style this selector. It didn't make the final version, I don't think, obviously here. But there was just a kind of talk original concept, but I think it got shot down from a, like, from an isolation standpoint. So the idea is, I think, just, and you could see this too, you have a website and really cool ad campaign.js is also put on your website. And they are just going for it on their styles. And all of a sudden your buttons turn pink on your whole web app. That could be a problem too, like, so I think the idea too is nothing, the styles in the web component don't shoot out, but then the styles don't shoot in. So it's just a hypothetical argument there. But I think we're figuring out what, you know, again, it's just sort of experimenting with the limitations, but it was talked about, it's being talked about, but it's not something you can do. So does that help everybody? Any more questions? Oh, we got two more questions. This is the hard part. So keep asking. Could you go back a few slides? I just wanted to distinguish the regular, the light dump. So here, you have that shadow DOM boundary. That's dynamically inserted in there, right? And that's the difference? Yeah, correct. And so you can actually, like, if we go, let me go to the code pen. We'll go here. And we can do some web inspecting here. You ready? It looks actually a lot like my drawing. We have our example element. And then here's our light DOM button, right? And then we have the shadow root. And that's the shadow boundary that, like when you say attack shadow, it's creating this. And inside there, I put that slot element and then our shadow DOM button. And the slot element is revealing the light DOM button. It's confusing, again, because it's new, but you can actually click on here and, like, figure out what it's talking about. So that's kind of helpful, too. So yes, question. I was just wondering if a shadow DOM is both open and styleable, what would the benefits be over just not using a shadow DOM then? Okay. If the shadow DOM was open, styleable, what would be the benefit of using it over just not using it? Yeah, very little. You would still have a degree of script, like containment, you know? And you could still, like, have your custom element. You could still have shadow DOM, you know? And so the API interface, the people you work with, author is very succinct. And you can put that in your server rendered template. But yeah, there might not be, like, I don't know. For me, there's still gigantic benefits, because when I want to distribute a design system, I want to use, like, our tabs and our accordion. Just so when people, and then give them sort of a cool way to, I guess, like, author that, you know, in an intuitive way. And sort of limit mistakes. You and your company might have a tight integration with your CMS, you know, where you're like, we only offer these three variants of the cool button or something. And so cool button only comes in three flavors, and they have to choose one in the CMS or something like that. So that's maybe a situation where you'd want to use, like, web components still. But yeah, they'll, like, it sort of blurs the line. So I think there's, like, if you offer open styleable, they lose a bit of their island-ness, you know? But I think from an authoring perspective, there's just times where you're like, I just want to style this. Like, let me make the buttons pink, because that would, I could leave work that day. So we have a question. If the button has a specific class name, and we find styles for that class outside of the web component, would those styles still not apply? Excellent segue into my next slide. Okay, so we couldn't style deep style, right? So what about classes? That's like the next thing, right? Classes, classes work everywhere, right? That's what, that's what I thought until this. So pink is background pink work. This is, and so in the Shadow DOM, this is background pink. Classes should work, right? It does not work. Frustrating, right? Because again, breaks the expectation. I wrote pink up top, it should work down in the component. And, you know, to be honest, this may have like massive implications for like utility class sites like Tailwind and stuff like that. But there is a way, there's actually a few ways. There's like old ways and modern ways to get those styles, like those classes. But basically, because it's the same rule, like I didn't author it, so I don't, you know, control it. And you could also think of this as like class collision. You know, if I'm using Google's material web button and I style whatever material web button from the parent, Google doesn't want it to change. They want it to still look like material web button or whatever. Okay. But there is a way, if you're authoring, you can trick it. Do you want to learn that way? It's fun to learn. But it may make you feel gross. So link, rel, style sheet. Okay. And then source. And then we're actually just going to yank that. This is a code pen feature. But you can like go to any code pen and type the extension of the end of it. And it'll like, oh, I'll just give you the CSS part. So we're going to basically double link the style sheet, right? We're linking to a style sheet from within the component. And let's see here, hold on. I'm going to save it and refresh it, because that was working this morning. Let me see what's going on. Link, rel, style sheet, correct? Oh, y'all should have caught that. Come on, front end masters. So, all right. So you can inject style sheets by the old link tag. Yeah, it doesn't feel great. But this would be a way to do it. You know, there's actually more modern ways to do it. But that starts getting into the not supported and everything realm. And so I'd be happy to talk about it. But there's a feature called adopted style sheets. And it's very cool. I'm very excited about it. But it's not ubiquitous. I don't think quite yet. Yes, another question. Can we add the part attribute on the element and target it from the outside using the pseudo selector part? Yeah, we totally can. And we that's jumping ahead, like two slides. So I'll get there in two slides. Is that okay? But we can totally use part to grab stuff. So, okay, so global classes we learned doesn't really work unless we go the weird way. Yeah. On the kind of same track, if the mode is open and so then the component is accessible by JavaScript, is it possible and probably not recommended to like set attributes via JavaScript as like, imperatively, is that something that works as well or does the shadow DOM protect against? You can. Yeah, if it has a shadow root, you can append a style block inside the element as well. So there are ways. It's just nothing's cool until you get to adopted style sheets.  But if it's open, you might be able to get in and fuzz with it. So that's just an example. So I guess I could show that. But let's, that's maybe a deep dive. But yeah, one thing that does kind of work is this idea of inheritable styles. And I didn't know what these were. I had to look it up on MDN. Quite literally, it's the anything that can have the value inherit in CSS. But you might think of it as something that might like cascade down into an iframe. Like if you set the color or the font size or something or the, I guess, font family. Yeah, if you set like colors and fonts and stuff, you would sort of expect like an iframe to have some of the same behaviors. It's a loose thing. But I think it's sort of the, like, these styles can go everywhere. It's sort of a these are blessed solutions, blessed styles. But I think you'd want it for any sort of importing or frames, you know, probably this is like old technology related to frames. So we have some like light DOM text and light DOM button and our button duplicator duplicates the buttons.  And we're trying to get the button to do it. But, you know, I'll explain that. So it's just going to duplicate it, right? And then so you'll notice the light DOM button actually obeys the font, but the show DOM button does not. This is another weird bit, specifically maybe with buttons and replaced elements and how they it's like the system UI's buttons show up in the show DOM and stuff like that. So you don't have as much control. But I would have expected that to sort of work, but it does not in the shadow realm. And so that's too bad. Frustrating to say the least. But like, it's good to know at least some things kind of cascade down through. So and this can be like, so this does work. But this can be again, a positive or negative.  Well, it's because something bled into it. So as good as our egg solution is, some stuff still goes through styling from the inside. Okay, let's say we have control, we can author the web component. These are ours. CSS variables. And we talked about this a little bit before. CSS custom properties, that's their official name, are an in type, a type of inheritable style, they cascade down through elements. And so we can set our our bg variable and our dash dash text variable. And we can alter the web component, the inside the web component from the outside. So our alert, you know, we're setting that on the outside. And then inside, you know, it's actually looking for some variables. And it says, if you define that variable, I will render that variable. I know how to do that.  This is a real good way as for you as a component author to appease designers, but but to offer a little bit of customization that might get some mileage out of your component, that's colors, that's padding, that's like specific sizes or something like that. If you can variable is those parameters, you can basically, you don't have to make 10 copies of the same button just to appease everyone in the organization. Does that sound pretty good? Offer a little more a little customizability goes a long way. Okay, predefined themes is another thing that web components do.   So I think that in what's where I see this working out well too is kind of like, if you have a CMS integration or something like that, and they can like just specify how much padding they want on the alert or the how big it needs to be or something like that or a theme, like this is the special event one or something like that. So yes, we have a question, but theme is not like a reserve keyword in the specs is just a best practice. Yeah, just a best practice, this could be size, this could be whatever you want to call it. So that attribute is something you program, I can show you, you know, I think in here, scrollie, scrollie, scrollie. I defined it in my properties. So I'm making a custom property. I also have one for icon. So you can choose like what icon shows up here, just in case, you know, if you don't want to warn icon, you just want a little message icon, a note or something, you can do that. This could hook under your whole icon system. Those icons could be web components, however you want to do it. So all right, all good so far. And then this was the part named shadow parts. This is how you get that button. Okay, so I'll walk through it. So I just have this, I have the SCSS, but there's a way in your web component, and I'll kind of get down to here, going all the way down. And I added this part equals button. And just that like one little line of code makes a huge difference because you're basically saying this is a part that you can style. And then in your CSS, you reference the pseudo element part button. So, hey, custom alert, give me the part named button. And result is I can style that button and submit a form apparently. So anyway, so you can style that button right there in the browser, or like right there from your CSS file, if that part has been offered. So this is kind of one of the newer bits to Shadow DOM and stuff like that. So I don't see it that often being offered, but I think it's a really great way to be like, not just like we have themes, not just we have variables, but oh, if you really want to mess with this part, go ahead. And I've seen like really radical things like for like SVGs, like you could just supply your own path or something like that, you know, that it's kind of cool options there. I think this is a really good solution, but again, your mileage may vary. I don't know your system or your problems you're trying to Does it continue down the tree like so if that button had a child, would you be able to style that if you could access the parent? Hmm, we could try. I don't, I think like you're saying like a child part or in a totally different component, maybe or you selected the button by its name a button, but then if that button had like a paragraph tag in it or something or span, could you reach that span then since you already have control of the parent?  We can try that here. Let's go, let's get dangerous. We can put a span inside of a button, right? Span, right? And I think the answer is going to be no, but so you're thinking like button span or you want to put it on the outside or? My intuition is on the outside, but either or I suppose. It does not look like that works. And that's kind of a thing with web components is they sort of only, they let you in and then say that's as far as you can go. So you got in the door, but it's very specific about what you can style, so. Did you try it on the inside two doors? Oh, like here? I would expect it to be the same, but maybe we need a different style for it, but yeah, it doesn't like go through and we can't like, so yeah, so it's too bad. That would be cool. Yes. So could you just put styles in that block that's right there? Could I put in which block? Another style to see if it affects the span with the current selector. Oh, so like you mean like a whole other block or like add another style? Oh, okay. Yeah. Yeah. Okay. Yeah. Let's let's do that. Span, right? Or something? I think like, because this is actually looking for the part named that. So I think it probably have to go on the outside. You know what I mean? So orange important, important like that, or maybe I'm not understanding where without the less than span. Okay. Put the span inside the brackets. There's nothing. That's right. Oh, okay. Okay. So you're putting span in here. Okay. Yeah. Yeah. I mean, yeah. Okay. We can try that. Yeah. Yeah. No. So yeah, it's it's frustrating. And that's like the again, the foot gun, it's the loss of control. It's the I'm good at CSS. I like know how to grab that like I built my life on like, doing things out. But all of a sudden, it like doesn't work exactly. But nameshow parts are a way to at least offer up a piece of the puzzle. Yeah. That's what people are saying in the chat is that you just have to make multiple parts to expose more pieces of your elements. Yeah. And so I can show that podcast player when I have. Yeah, here we go. This is my lit version. It's kind of hidden. I guess one thing I was looking at for like a podcast player, right, you want to like move buttons around wherever you want. I think it's on the shop talk version. So that's my fault. But you want to move things around you want style things a little bit different. Maybe I just want to delete a button entirely or something like that. And so I name gave all of the parts names and you're able to like, move and delete and every single button in the like little podcast player UI. It's pretty cool. It works pretty effectively. And even there's like, you could in theory just kind of change it quite dramatically. So yeah, again, styling is cool. But there's actually new CSS you have to worry about inside the shadow DOM. So shadow DOM only CSS as if this wasn't tricky enough. There's now a new stuff you have to learn for your job. So host, right? Host is basically a way to select the from inside the web component. You select the parent host, the parent custom element. Does that sound right? Like so you have to the shadow DOM goes inside the custom element, but you want to style, you know, custom dash alert. So how you do that, you know, I have like a div here with a P, but I want to also add a P inside the host. And I'm going to do the slot thing. And then I can style this one, the host space P, I can like reference things inside the shadow element, I could style the whole host as well. But this is stuff you have to do in here. Like I could do, I'll have to open this. I can style the whole host. I may need to make like a display block because it's just kind of weird about that. Right. And so now I can style the whole element itself. So this is helpful if you just need a little more if, if you want the whole element to be like colored, different colored background or something like that. This is a good way to just kind of like, let's style the host itself. So and then there's actually a cool thing. There's actually a cool thing. Not only can you do that, but you can style based on the host's context. Like what element is the host in, I'm going to change it. So this one, our example element is just a regular example element. And then we have an example element in a card. And we've set told our thing if you're in a card, if you're in the host context of a card, turn your background pink and then add like I'm in a card. And it does it. So that's kind of a super power too. If you think about like, I think of cards all the time, I don't know. Like, if something's in a card, I maybe want the padding or something to behave a little differently or something like that. I don't want to like write these like one off overrides or something like that. I'm thinking like about buttons or something. But there's your again, this is sort of newish tech. But I think there's places where you can use this and in a sort of contextualize your element based on where it appears. Because we don't know where our components appear. But now we can kind of say, well, if it appears in this situation, now do something.  You don't, it's like a parent selector almost or something or the ampersand and SAS or something like that. Slotted. Okay, this is actually a pseudo element. That's why there's two dots. But this is basically just as anything that gets slotted in. And it will target slotted content. But again, it has that same limitation like part, it only does one level deep. So I have this example element. I'm going to slot in the I'm pink, but I'm also going to slot in a div with a paragraph. And it's going to say I'm not pink. And then my SAS or CSS inside the web component is all slotted paragraphs turn background pink. And as you see, the nested paragraph tag does not get styles applied. That's because it's too deep. It can only select one level deep. And then our shadow DOM paragraphs are our host paragraphs are orange. So one thing you can do, you know, if you are, this is something I've totally done, like slotted star. So anything slotted at the root element, just turn it pink. If that's one way to work around it. But again, the like, you know, like these, like you can't do complex selectors in here, unfortunately. So I wish it worked like that. And I think there's even been conversations about maybe enabling that, like where compound selectors in slotted. But that's not something that exists yet. So slotted. And then there's kind of one more new special CSS feature called defined. You'll see the slow element. And it took a while right to come in. I'll redo the animation here.  You can say if an element, if the slow element is not defined in your CSS, like lower the opacity. And actually, you could do that for any element. Because every element in HTML comes defined out of the box. And if you just had like not colon, not colon defined in your SAS or CSS, it would just hide any custom element that has not been defined yet. But you can also do a slow. And then when it is defined, you can trigger the opacity or whatever. This is cool. And let's you control fallback experiences. You could think of a situation where maybe you want to like, if it's not defined, make the height 500 pixels, because I know like an element or image or something is going to show up in here. That might help in your performance metrics. But it also can just be a situation where you want to like make those skeleton screens or something like that. You could kind of fake this stuff in pretty easily in your shadow DOM. So you can have some like fake content that then like kind of whatever pulses and fades or something and then boom, upgrades when it's been defined and the custom element is happening. So is engaged. So kind of interesting. I have, you know, I think that details, utils. I think Zach used it to do the like, he'll like hide it and open it and measure it. And that's how he measures it before it's been defined or something like that. So have an interest. And then when it's defined, then he applies the animation stuff. Let's recap. External styling. You could style a light DOM. You wrote it, you style it. Deep styling shadow DOM doesn't work. Global classes doesn't work unless you go the ugly route and like put these style sheets inside your weapon. It's fine. It's fine. It's works. It's web technology. All it does is make a request and brings back CSS. And if your CSS is already cached, like the hit is like zero. So if you've already requested the tailwind CSS file in the web component, it would be zero. And then global classes. Okay. Yeah. But so we can make that work. Inheritable styles. Yes. They pass through CSS variables. Yes. That's a great way. Predefined themes. Yes. That's a great way to style. Name shadow parts. Yes. That's a great way. And then CSS pseudo elements host, host context, slotted, defined. These are also kind of cool tools you can use to style your web components from the inside. And you know, or even the outside, I guess in the case of like defined and stuff like that. So cool. Interesting. You know, I'm curious to see how y'all will use it, but it's just new stuff. We have to, we have to learn. And now it's our job to know. So there's a question. Could you use an attribute selector to select a part by custom property?  Like, um, like custom alert, like part button or something. No, like, if it was a theme, for instance, a specific theme, it was a part, like they used like the alert theme worn and then the part button. Oh yeah. Okay. Yeah. Like, um, oh, oh yeah. Okay. Theme. Yeah, you can totally chain this stuff. This should work. Um, I wrote it. I hope it does. Um, so let's do, let's just change it to, this should work. Oh, I don't, I didn't do this right. Oh, live coding. Theme equals worn. Let's see. Come on. Let me refresh my code pen. Oh, weird. It doesn't seem to work. I probably messed something up. Let me see. What are you? Oh, roll icon one. We'll just do icon one. There we go. Yeah, so you can like make this side, the left side of the selector as complex as you want. Um, so what can be kind of cool is you can kind of like, you could kind of chain, you know, like, like, you know, you could, you could change the color of whatever you want. If you have multiple alerts or something like that, you could kind of like style them differently if you needed to. So on a single page or throughout the entire system. So you have a question? Yeah, uh, based on your experience using web parks, would you say the majority of people do implement the shadow DOM kind of like that's the default that most people use when they're creating web components? Like they code stuff in there? Yeah, I think people do, you know, the like style tags in your web components are pretty normal. Where it's moving to, and this is kind of the like future state, and maybe this is just a great place to talk about it. There is like, this is not fun, right? This is not good. We don't like this. What would be a good, let me go to a complex example, and then I'll, let me fork it, right? Forking pen. Here we go. Okay, so I'm going to just delete all this. We don't care. But, all right, so this would be our default custom alert. So where it's kind of heading is this idea where, what if I could take all this stuff? This is so much stuff.  And what if I could put it in a CSS file somewhere, right? And this won't work because it's not, it doesn't know about the style sheet yet. But the cool thing is, you can like import a sheet from, this is a new like CSS feature. I can import a style sheet from a style sheet as, I think it's, or as styles, as style, I think is what it is. And then, okay, unexpected identifier. Maybe it wants this. Let's see. Is that the sheet as style? Import sheet as style from. Import sheet as style? Yeah. Let me see. I thought I knew how to do this. I have a blog post on it. Let me go to my blog. Everyone likes their own blog. Everyone references their own blog, right?  You're probably familiar with like something like emotion or CSS modules or style components or something that generates like a robo class on your elements and IDs and stuff like that. Shadow DOM is interesting because you don't need that robo class. That robo class is just for scoping the style to that element, right? So you don't need it. That's what Shadow DOM solves that same problem. But there is this idea of like what if you wanted these CSS robo classes as type CSS. We blew it. Okay. Wow. Okay. So that's what it is. So we can import these styles as style and then we can actually tell our document to adopt that style sheet. And that is all done in JavaScript. It's called CSS module scripts to not be confused with CSS modules. It's very confusing. But you basically import this and you create an adopted style sheet. This produces a constructed style sheet and then you adopt the constructed style sheet. I know. It just rolls off the tongue. So let me go steal that from myself. But I went through and I was just kind of like, you know, maybe I could make these like robo classes up and do it because I actually kind of like it sometimes or if I'm not using web components, what if I wanted to use robo classes without like build tools and I did it. So that was kind of fun. But let's go back to the place where we were importing stuff. Where's our here? Okay. Assert type equals CSS. Gosh, I was way off. Okay. So nothing's dying. Everyone's happy. Okay. And so we can document adopted style sheets equals sheet. Right. We're sent. We're basically pushing the sheet into the adopted style sheets. And you will see here, I think I can do this. Well, let's not. Let's do it in the regular console. It didn't do anything yet. You know, it is very mad at me. Let's see here. Okay. So, but you can do document adopted style sheets. Right. Let me go into the code pen actual. And now I'll try that. Oh, no. It's a proxy. It's an array of zero. And so nothing happened. That's unexpected. Well, let me see if this works. So what you can do in your element, in your constructor, you can do this dot. Let's see. This is a little element. Okay. This dot shadow root or whatever you like. Hopefully you have, I think you get that for free inlet. You have to create it in a vanilla web component. This that should have adopted style sheets. So you can basically, oh, no. Okay. So it doesn't have a shadow root yet. Weird. I'm going to have to look into this. This is maybe a bad place to riff on code here. But there is a way to basically yank the like style sheets into the into the web component from here. I'm just missing like the like what exactly it is. So let me work on that in a break and we'll figure out what happens. And then we'll reset like nothing happened. No one's going to know. But but so this would be like the kind of modern way to do it. Again, it's not supported in every browser, though. And so that's like you were stuck with link tags until that gets resolved. So but it's pretty cool tech when it works, not how I'm doing it right now. So okay, questions or try render root is what somebody is saying in the chat. Thank you. This render root. Let's this would be beautiful if it worked. I think what's happening though is my browser is not ingesting the style sheet correct correctly. Styling issues. Can you get around any of these by using like the libraries that make stuff web components easier like lit or I forget the other ones. But yes, help with this at all or no. Yeah, they super help with it. We can we'll get into it. But that's actually a really great place because we can like get out of this disaster I'm creating. Because it's pretty easy. So I'm going to delete all this stuff I was attempting here. And what lit offers is I think I showed you this like HTML tag template or you probably saw it. It looks a little bit like JSX. It's a little weird. But it's basically a template literal the back tick back ticks. And you can write JavaScript inside there. But we have HTML here. But lit offers CSS as well. So lit has a static I think it's styles. And then we can return CSS back to back tick. And now we can just re yank our CSS back into here. And let's see if that works. I'm expecting that to work. And I don't know that. I wonder if it's not static get. That's what I'm thinking, right? Oh, there it goes. Hey, it's static get. So lit has this styles method. And then it also can return. And then the CSS template literal, which turns that into a style tag kind of behind the scenes.  So kind of in a standard react component kind of way. Maybe superfluous. But is it possible if you've seen people either importing the template literal string or other ways so that so that developers can get the nice syntax highlighting and pretty printing and formatting in some other file? Is there any practice around that? Right. So there are like web packifications, I think that you can do. But you know how we were trying, we're attempting so successfully to do import sheet from some styles sheet, some CSS assert and then type CSS, I think is what we're doing. So that's CSS modules. There is a way to do, you can import JSON from some JSON file and assert type JSON. So that can be handy. And these are native ways. You can do this like web pack and whatever, like figure that out. But these would be like native ways. But you could, there's also talk about importing some template from some HTML as HTML. I don't think this is out in any browsers yet, but it's I think actively being discussed and specced out. So I think it's real close.  But so that's on its way. It is not here yet that I know of, but that is kind of the future. So your web component may look more like, I'm just importing some things and get really succinct as it goes forward. So one common like question is like, we went through the way to install or like do styles through like a link rail style sheet that it's hard to explain, but it feels a little ugly, right? And you can't really explain it, even like writing a style tag in the web component that feels a little ugly, don't know why, but it just doesn't feel right. It's totally fine. It's validation. But then you then we looked at like getting importing stylesheets the new way. And we finally figured it out. It took a little behind the scenes camera work, but we figured it out. And I'm going to kind of walk you through how it works as from the late context, but just how what's going on kind of with this thing called adopted stylesheets. And I put the crying emoji because it caused me pain and suffering to figure this out. But it's relatively new. So it's new to me and happy mistakes. We're figuring it out. So import sheet, we're importing a style sheet. This is a constructed style sheet. We're importing a constructed style sheet from our style sheet, our code pen, this code pen, actually, but this style sheet right here is being presented as a style sheet. And we're asserting it's type equals CSS. You can have other types type equals HTML type equals JSON. JSON works in the browser today. HTML does not quite yet. But then when we go down, see how we have no styles in our in our custom alert? Well, we can delete that we're not using it. But then in our connected callback, the way lit wants you to do this, you call super connected callback call the parent connected callback just make sure it runs out use expects. But then this render root, and that's lit's way to call a shadow root, right? Like that's where the content renders this render root dot adopted style sheets equals angle, or what angle? No, brackets, bracket, they're just regular brackets, brackets sheet. And then that so that puts it into the adopts the style sheet into the shadow root. Now you can do like this won't work from here, but you can, you can use this without web components to it's like a way you can use it without web components. And you can adopt them into the document itself. Nothing's going to happen here. But you know, if we had, oh, that might be confusing, because it like would apply to the code pen and stuff as well. But but yeah, you can you can adopt style sheets in native HTML now. This that said this feature is not in every browser yet at the time of this talk. And so it may be a full year or something before you're seeing this everywhere you go. This next part, we're actually going to go kind of deep on on writing JavaScript. And that is kind of the whole next section of the talk here, writing web components with JavaScript. And I put this guy in here, because he's just frustrated. I'm frustrated. I have your last half hour. I'm frustrated. But the, you know, styling can be frustrating. But, you know, authoring, authoring, you know, I think you're starting to see it, you know, one thing you need to know about web components is they have a life cycle, just like a view component or a react component, or I think every other framework has a life cycle and updating life cycle. And this in this custom alert example we have, we have, you know, we get the observed attributes. And then we have a constructor in the super says, make our custom alert here, I can do some drawing here, make our, this super means make our custom alert behave like an HTML element, right? That's pretty easy. And then next in the stack, it's going to go to connected callback, right? Once it's ready to go, it says I'm going to say I'm connected and you can do whatever you want once I'm connected. Disconnected callback, whenever if you have to do tear down work, you do that in the disconnected callback. This might be like event listeners or something like that. And then attribute change callback is kind of a, oh yeah, so component connected would be like reacts component did mount component will unmount attribute change callback is a little bit like almost like views watch syntax, if you've ever used that, but you can basically when an update happens to something it's observing, it'll tell you the old value and the new value in case you want to do something with it in between like intercept it or add a thousand to it to make more money on your dark web website. So then you register define the element in the bottom of the life cycle. Okay, then it gets a little more complicated, right? Injecting templates. So you have like, to create a shadow DOM, you need to clone a template. And so here I'm like creating a template with a create element. And then putting the inner HTML, this feels a little disgusting in your browser in banking software might not appreciate that. I'll explain that a little bit further. But then div hello world, right? And then we're expecting that to show up in the shadow. So I have to in my constructor attach a shadow root and create a private variable, attach the shadow mode open. And then I'm going to append the child, but I'm going to copy the my template content clone node truth. So you just clone that node and inject that child into the shadow DOM. Okay, and the shadow root that I don't know you put it all together. It's fine. We are snobby developers. Now we've had decades of ergonomics behind our back. And this does not feel like a good experience in authoring a web component. Again, you know, there's got to be a better way. I hear you saying there's got to be a better way. Everybody has got to be a better way. Wow, this is good. Well, hey, didn't you say web components were designed for framework authors? Yes. Yes, I did say that web component libraries. And this gets at an earlier question. But there are lots of web component libraries. There's lots of ways to cut a web component. At last count, I have this website here from I think it's div rights puts it up. Yeah, div rights. They audit all the different ways to make a web component. And there's 61 different ways to spit out a web component and they compare them all, like how long it takes to make a web component or how much code you know, it takes, you know, maybe don't use that one. But there's a lot of different ways to make a component. And then they kind of do it in a set of like 30 components as well. And they see like how much reuse is kind of happening. Very valuable thing that div rights is doing there. But what's neat about web component libraries is they are typically five to 10 kilobytes in size, and then provide a lot of convenience in a small package. That's either syntactic sugar, or, you know, just helping you kind of, I guess, shortcut problems or redundancies and stuff like that. So we looked at maybe a little bit about how like lits helps in CSS and stuff like that. But so there's a lot of different flavors. And, you know, my favorite example of this is like, you just saw the way to inject a template, like you create a template, or you could like query selector an idea of an existing template on the page, and then you clone that node. With lit, it looks a little bit more like JSX in a react component. You have a render function. That's the thing they invented and put in there. And the render function returns HTML tag template literal. And this HTML tag template literal is I think the most wonderful thing in the world. There's a lot, you should watch this video I've included here. It's kind of the announcement of lit HTML, which is the project for that HTML tag template literal. But it's just it takes a string and converts it into HTML. But what it does is it creates a template element. That creates a template element. And then it remembers which parts you have JavaScript, the like dollar sign curly braces. It remembers those parts. And so when you update, it actually only updates those parts. So it's really intelligent update. Whereas like in, in react, you'd have to do like memoized stuff or whatever to make it not re render on every change. Like the cascade is really huge. This sort of balances in it. And it just says, Well, I'm I've remembered what I need to update. And so I only update the little micro parts, I don't update the big template. So pretty cool, pretty efficient, updating system. But that's all happening behind the scenes. And that's like another reason you'd maybe want to use a framework, right? I'm not Dave Rupert is not going to code my own template creator system, you know, JSX alternative, but somebody has. And so I'm going to leverage the framework to help with that. You know, again, the lit has a full component lifecycle. And it adds actually hooks, we had connected callback and disconnected callback, but it adds new kind of, I guess more human language update, like, Hey, I'm going to perform an update. Did you want to do anything to this data before I update it? No, great, then I'm going to render. Okay. And then once I render, then I'm just going to tell everyone I updated or like an attribute updated or whatever that changed. And if it was the first update, I'm actually just going to say the first update happened.  So I don't know if that's exact, but that's sort of how I see it, just like, it's going to actually like, figure out that it when it needs to render a little bit more efficiently, give us a little, some few more hooks. And in doesn't feel as ugly, to be honest, which of course is the most important thing in web development. So let's compare some web component libraries. This question has come up, but you know, like, let's just look at them and see the shape of them and maybe understand the differences. Maybe I'm not going to go through all 61. We could, I guess, but we're going to have to pay more for our front end master subscriptions. But we'll, we'll look at some of this here. We've kind of been staring at lit and we're actually show a bunch more lit examples. So this will be kind of like, get almost old to you at some point, but this would be like a classic button counter, right? Increment, decrement, you know, and you render the HTML at the bottom, right? So, and then this is kind of a custom directive and it calls these things. Yeah, okay, right, pretty familiar shape, not too different than react, I'd say, you know, or kind of a react and view hybrid. Speaking of hybrids, here's one called hybrids. And, you know, this one is really interesting. When I first saw it, it gave me sort of svelte vibes, you know, when I saw it. It's sort of a, it has a render function. It uses the HTML tag template literals. But it has just a bit more, I don't know, functional programming aspect to it, right? So that's good. Lit can be functional, too. But this would be kind of just an example of that stencil JS, which powers the Ionic framework is very cool. You know, but it's got these decorators, JavaScript decorators, not officially a future feature, but it's coming soon. But they're leveraging that. So you're going to have some transpiling sort of thing happen. But it looks like they're also using TypeScript. So kind of future TypeScript-y stuff going on here. But, you know, it's pretty nice. It gives me kind of angular vibes if you've used Angular. I hope that's not a slight, but just more of the like strong typed way of programming. So that's the vibe I get. But one neat thing about stencil, it has like a superpower. I haven't messed with it, but I've heard about it. Stencil is kind of designed to actually transpile to different frameworks as well. So if you need to turn this into a react component, you can do that. Or if you need to turn this into a view component, it can kind of there, I think there's tooling in place to bridge that gap. So that's kind of a new thing that you may want to check out. Again, your mileage may vary. But I was told it existed. Now haunted. Haunted is maybe my favorite. It's lit with hooks. So it's kind of the react hooks sort of look shape to a web component. And I actually like this quite a bit. I like hooks, but I don't use react. So this would be a great chance for me to use hooks more often. So pretty interesting. But wait, there's more. There's always more. You may not even have to switch JavaScript frameworks to use web components. If you already have something in view or svelte or pre-act or Angular or something, you might be able to take that code and spit out a web component as well as use web components. Kind of cool. So let's take a look at what that looks like. Svelte is maybe the easiest. You just write the code and then at the top you say svelte options tag equals my counter and svelte's compiler like command line tool figures out the rest and spits out a custom component from this. Looking at that like all the ways to make a web component, you know, looking at that, you know, it's interesting. Svelte comes in at kind of the smallest. So svelte may be one of the best ways to make a web component. Who knows? Depending on how you measure that. But pretty cool. View is kind of in this class of they have a function called define custom element and it's basically a wrapper. So you'd import your view counter, your counter from view. It's just a view component that looks like this. But then your custom elements define my counter, define custom element my counter. Really verbose. But basically you use this view function to spit out a web component from view. Okay. So this might be a good way if you have a system in view and somebody's WordPress blog really wants to use those components but you don't want to put view in front of the WordPress blog. Maybe you can use this to like offer a alternate version of your existing system and provide some some components. Your mileage may vary in production but it works. It's supported and they score good on that custom elements everywhere. Preact sort of the same thing has a create custom element. You'll notice it's not using JSX. It's using the HTML from HTM react. So again another sort of tag template literal. And then you custom elements define my counter create custom element my counter count. I think that's you have to put in the props that it's going to watch and stuff like that. So all right. Cool. You know there is like one holdout. This question came up. Notably react is not being offered here in this course. But the react situation is getting better and according to custom elements and there's an experimental branch of react that should hit in react 19 react 18 just came out at the time of this talk. But react 19 in theory is going to get support for custom elements and web components. So it could be an exciting time where you're able to export components from react and you're able to import components web components into react. So everything you learn here today or in this course could actually work in your react project in a year's time or something. Okay. Let's recap. Web components have a life cycle. Right.  There are libraries that help make writing web components easier. Just makes it more palatable to us developers. And there are lots of different flavors of web components. And I almost promise you if you have one particular must have somebody's probably addressed it a