 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. And, you know, you just kind of got thrown into a job and they told you, you have to use this. 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. So you have, you know, components. 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. And then I can call that button whatever I want. 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. But if you steal elements, if you borrow elements from some place on the internet, but you want to make it look like you coded it, or if your organization wants like the same prefix in your custom element, you can totally do that. 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. And then a bunch of web components kind of revealed in that shadow dump. 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. So, and even if you're like to re-platform something like, you know, you, somebody, one team on your site really wants to use view for some reason. 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, you may just shave off 90% of your, like, wait times, load times, just by switching, you know, potentially. I will also throw a caveat out there that you can write bad code in any language you want. 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. And, you know, this course is probably going to be a little bit different than every other front-end master's course you've ever taken, where you open up the command line and just start blasting away at code. 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. Now, you probably don't want to, at your bank, you can't just serve files from 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. So yeah, and I'm yonking lit off of even like where I coded and I'm just yonking lit off of unpackage. 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 then we have this neat feature here, like you can actually like time jump in and like jump to like a point in the podcast, like further into the podcast, just like you can with like a YouTube player, you know, it gives you like a time stamp up here. 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. I mean, this is ugly, but you're adding superpowers to this for some with like minimal code, you know, and I, again, I kind of am a fan of how this sort of like plays out. 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 like a free drop down disclosure, you know, it's, you know, you could do it on a form like you want to get birthday reminders and you click it and you drop down and show them the birthday form or whatever. 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. It's not a tab set, you know, and I'm like, well, I mean, I guess it's not menu navigation, wait a minute, what? 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. This isn't really a, it's just a collection, you know, a few components and it has, you know, kind of the standards, the hits, you know, it has accordion. It looks ugly, but you can bring your own style to it, you know, you know, if you're doing all whatever tailwind or whatever in the code here, you know, that's maybe super hard to read. Let's go over to my example because we can read this code for my tabs. The code here is pretty awesome. Generic tabs will give a label to the group. 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. And then you get features like you get a tabs control with just writing HTML basically, writing normally, normal ish HTML. I even committed a, like, like a patch to this, like what if you, what if you didn't want buttons? 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. I mean, if you think about like, you know, video games often have these like radial menus, like you go into the menu and you like go to grenades or something, I don't know, or say this voice line or something. 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. And then we have a sky, which is just a giant sphere. Like I think it's 90 meters or more. It's a giant sky, a giant sphere that's colored on the inside. 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. You know, I was made these guys talk, oh, this is probably my favorite one. This one is a whale that you can talk to. It's like a little life coach. 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 just copy some tags and paste them into another site. 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. And you maybe actually encountered this like you search for dinosaurs or something like that. Have you ever done this with your kids? Search for dinosaurs. And then you'll get like a 3d model of a dinosaur. And then there's a little AR button. And you can put the dinosaur in the room or tiger, transverse wrecks or whatever. And you can put the tiger in the room. And then your kids can like kind of interact with it and like see how big a tiger is. 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? You know how they have like a little task list? 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. I'm going to manage some cash on my own. 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. You basically say like, I want tabs bar or iOS tabs, I want a tab bar. 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 he said, you know, I looked at this mini framework and I said, you know, I would get more gains by switching over to Lit because Lit has kind of done all this. 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. And what scroll shadow is is this, you know, when you scroll up something and you want to show a shadow or you scroll down and you want to show a shadow on the bottom and be like, Hey, this one keeps going down below. 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. And I think there's technical reasons because if you were able to deep style it, you know, you might, you know, should that only go one level? 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. And again, like, if you're using stuff off the shelf, you maybe don't control that, you know, if it's closed, you can't get in. 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 then we have a font fantasy font family of fantasy. 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. You're like, why is the texture red, you know, on my inputs, you know, I don't I don't understand. 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. So this all depends on the plugin, you know, that shadow scroll plugin I used that had them to up that has some that has some variables that you can use to style inside like the accent color. 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. I think of like the Gmail comfy cozy, you know, switcher UI, you know, you can offer these sort of things in your web components, you know, this custom alert, I have like a a worn or a danger worn as yellow, yellow, red is danger. Offering these like controls is super helpful for again, sort of like predefined styles and themes sizing colors, you know, maybe you don't want your designers inventing their own or whoever developers inventing their own padding system, maybe you give them one of two or three choices. 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? Oh, like a child child, okay, like child selecting inside the button. 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. So a little different, a little new. 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. And it's going to take like a little like I said, to like fire two seconds late. 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? An attribute selector like a, oh, oh, like, um, let me find my part one. 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. This is, oh, I hate this stuff, right? 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? So I did this whole thing where I made like CSS modules. 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. But the way you're authoring it is a little more like, you know, emotion or something like that. 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. This whole assert type equals, it's sort of just to allow us to inject whatever we want. 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 a lit like component lifecycle, maybe it looks a bit more like this, like it's going to update, and then I'll render and then tell everyone and updated, and then they'll like go back and then kind of do a loop. 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. So that's kind of they go through some code for you just like every other JavaScript framework. 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 and is working on it in some context. And even some JS frameworks can import and export web components. And I don't you know really show it here but I've actually found like in preparing for this course or even just taking questions about web components. A lot you know something like lit is really awesome because it's able to there's a whole community around it. You know your framework or your library is only as strong as your community. But there's a community around it. They're building projects and prototypes and different ideas and things like reactive context and stuff like that like context APIs and stuff like that. That that works all happening at the community level. And then hopefully it goes into the big project. So or it just lives in the community level. All that stuff is very exciting and interesting. But so one reason you may want to use a framework or a library I should say is maybe some of those problems those must haves for you exist in the community level. Whereas writing it all from scratch in vanilla web components would just be maybe a little too daunting or just time consuming. We all got to get work done. So yes you may touch on this later. But is there are there ways that like lazy load these these components so that they don't load if you don't need them. Right. Like as you need them. Yeah. So you can the way you like structure like imports and exports you know you know it builds out a tree and it will if you just want to use vanilla imports right. You can it'll only import a file if it's requested on the page. So my shadow shadow what was it called shadow element or whatever that I demoed shadow scroller. That's what it was. My shadow scroller will only request shadow scroller in lit or something like that. Like and then and then the next component that loads will just either grab the copy of lit that exists or and then it's code. But maybe it has a child component it'll load that one. But this sort of involves in like a multi page architecture you know so like your page determines what gets loaded in a single page context that gets into this sort of bundling and deployment stuff. And that's where you're going to kind of want to like do the intelligent bundling and code splitting to make sure that each one you're serving the least amount as possible onto the client. Does that help? Yep kind of a follow up to that then. Can you so let's say you do have a web kind of component if you're referencing another web component in that web component then does like the I'm guessing the ordering matters of your your imports and stuff like that or can you is that possible even do that? Like if I'm referencing a component in a component yeah you totally can do that yeah I mean I guess it's maybe possible you reference you know component A references component B which also includes component A that's maybe a disaster you could create. But again web components don't prevent you from bad code but that's you know I don't know what it does in that the browser must bail after three tries or three loops or something you know it probably bails after a recursion but but yeah so if you have web component A and web component B that requires C that requires D it'll negotiate that the native import structure will negotiate all that. It is like in production it's slow like it's a network request every single time so you maybe want to bundle in production but that's kind of the web component philosophy is like these the bundling and the code splitting and all that that's at the end that's a that's an application problem that is not a how I use how to author a web component problem so we have a question. Is it more common to use web components by themselves or together with the framework? That's a good question. I don't know I could maybe get that data. I think a lot of web components happen in some kind of framework you know like you know like a material UI web component thing or like a I guess they call it material web components or like Salesforce lightning web components you know I don't know how many Salesforce websites there are in existence but I think it's billions and so 90% of businesses are probably Salesforce but no I think a lot of people are using them in a suite I don't know if a lot of people are kind of like plucking one off since stitching together a thing I think a lot of people are kind of building a system or using an existing system to piggyback off of yes why use a template and clone rather than just setting the inner html of the shadow root you that's a good question I think that's possible I think there's I think what we're trying to get away from just as an industry in general is using inner html and in just that like it's not it's unsafe you know you could somebody could if you're like getting like whiz a wig content from your database your WordPress API and you're spitting it out in your component the component could in theory kind of hack your whole website because you you've just ran inner html I looked into the lit html tag template and it's really interesting it does some sanitization and stuff like that so you're not going to like open up a big security hold doing that so I think just in general the like practice of using inner html it's sort of a quick and dirty way to do it I'm not super good at experimenting but we could try I mean so one thing you can do like this dot render root dot text content plus equals hello I think I can like see now I'm in lit and I'm mad because I don't want know what lit wants but we could do we could try inner html whatever we could try this and see what happens it does not it's like not liking that so I don't know if lit specifically is preventing us there but I can experiment and try to figure that out so I just I don't see it that often which makes me think you don't want to do it for the next hours so we're going to kind of go through and author web components which is kind of exciting we haven't really done that yet in the web components course but now we're finally here now that we understand all the principles and and have had some challenges along the way we are excited to code I have three basic examples in the guidebook you know I think we maybe have time for two if we want to get out of here and and so and then the the big one the basic counter example right so just how do you do an increment button maybe we can add some styles to it make it kind of cool maybe we'll start there I have the custom alert example where uh you know that customer where I built and then you like can close it and it hides and disappears we could also do that one but I think we'll just do the counter thing that's probably the easiest way to get through it and then kind of the big one right like let's build an app that like looks for local breweries and we can see if we visited them and check them off as we go maybe something like that something pretty useful utilitarian and then kind of maybe get into the more like what does an actual app hold design system hold everything kind of feel like how do we do that and what's the maybe the easiest way to get going and get started so so we'll kind of start with the basic counter and you can maybe at this point probably yell it at me but so I'm going to I have like some cheaters here so here we're gonna kind of just uh we need to like start with like a basic like we want my counter right and we want it to uh we want it to show up here let me see nothing's defined okay here we go I'm just gonna call it my counter just so we know it for later and then we're going to type garbage in here so we know when the shadow dom shows up we did our job right right so um so I think the first thing we're going to see let's see here nothing's happening is that correct that seems like it should render at least something yeah okay cool um I need to figure out what's going on maybe I'll just make sure that that's all saved okay cool all right uh-oh copin thinks I'm a hacker okay great we're good okay we back copin we good um copin might be upset with how many changes I've made today great here we go um all right so the the outline right class we do classes but we could do like if we wanted to be cool you know to our friends who might want to use this right we could do that um my counter extends and do we want to do like the lit one let's just do lit because that's I I I'm not really a frameworks guy I'm not really a library you just use a library guy but libraries solve a lot of problems and I think we're gonna I just in this circumstance for like a five to seven kilobyte penalty I think it's like a good good trade-off uh just for like learning uh so our my counter is going to extend lit element but you know of course we know we need import uh we're going to go get lit element right element and then we know we want the html thing and we might as well just grab the css while we're here uh from lit right and then it's gonna say we don't codepen has this nice feature it says I don't know what you're talking about so we're gonna go get it from skypack great we have it and then the last thing we need to do custom elements plural define um my counter um and it's going to point to the my counter class easy enough we're good here okay we're gonna have some static properties right um um like we have uh what we we're going to have well what the properties what our counter need to keep track of count yeah it's count okay great yeah it needs to keep track of a count right uh and so and then I'll circle back to that but that's what it's going to need it needs to count right when we know we need a the constructor which is not my favorite part but you know that's just life in class based um programming uh so we're gonna call this super and then we're probably going to like initialize this count right uh to zero so this will be where the section where we want to kind of set it um there may be a way to set it up here I don't know it off hand so I just set it down there um and then because we're in lit we're gonna do a render function right and then what does our render function do return html right and then um it's gonna have it's gonna have a button uh plus or minus and we'll put out the minus one first we'll do we'll return our this count and then we'll have a button that makes it go up okay and today the pieces are in there it's it's we're not it's not interactive nothing happens here uh but that's actually really easy to do oh we have a question yeah yeah I don't want to get off track on uh framework stuff but why is count an object in the properties good question uh I I think you can maybe uh just make it like count uh but oh it didn't yell at me but I don't know if it's gonna do anything yet um one reason you do that um and what I was gonna test here was try to get into the increment and decrement uh and so one thing you do here to say it's like a reactive property uh is this state true and so you're basically saying like this is a piece of state so let's keep track of it like a piece of state so it's more configuration than like this is a property on this class totally and then you can uh you can actually pass a type um it doesn't do anything here um like it doesn't actually do type checking although in theory we're sort of set up for it and if you're using something you know more type based a lot of people use lit with type script as well so um so you could do checking there's can you pass in a value up there then too or yeah we're getting there we're gonna get there yeah so it's like like right now so it's a it's an interesting thing so when it's state it wants to be like local state right like inside um this is kind of a weird thing I just sort of like learned but count like wouldn't be cool if we could like pass an account um but we don't see that right it's it's not happening but what's what's weird is if I just take this out um it does work so that's sort of the properties API is like there's local state equals true is state and then I guess state equals false the default is would turn it into a property that you can adjust and this has some interesting like side effects like we have not wrote our buttons but you know what one thing I can like kind of do is this is like my weirdest favorite part so from the document I can query selector my counter okay and then I can say count equals 10 weird can't really do that with a react component to my knowledge just like hot select it and edit it it's like internal value that's pretty cool uh it's it's cool to me Dave Rupert and just in the fact like you could like change if I had my podcast player and I just wanted to like you click the link and now it shoots up into the podcast player that could be kind of cool like just it I just yoink the url the file url and then put it into the component uh kind of interesting but let's get the like local state kind of going right so we'll have like uh because I don't know how to spell increment and decrement we're just going to do plus and minus oh I'm I'm smart I swear uh count plus plus right easy enough and then our minus is going to be minus is count minus minus and then we have to go to our buttons right and this is a custom uh directive right is that what they're called when it's like the like thing yeah okay I get the directive and decorators mixed up so this uh but we need to use javascript in here so this dot plus so we're just going to say when you click this at click do this dot plus and then on this one at click or this one's minus sorry that would have messed that would have been a bug um and this one is this dot plus and I think this should work even with the quotes um you know jsx you kind of get confused because you wouldn't put quotes there I'm getting confused but what's neat about this is we're able to kind of pretty quickly create a counter allow it to be externally initialized you know so if it's your cart or something like that it can be initialized like that from the exterior and then um we can do this uh plus and minus thing but you know this weird you know state true if we just do if we now it's just a only a local state variable it's not like broadcast anywhere um so any questions you want to do some styles we can make our buttons green because I feel like we've struggled with buttons uh all day uh styles uh equals and then they said this works uh let's try it button uh background green hopefully that does it uh hey that did work that time it's Christmas miracle yes sir in the properties the count and then like having it an object and state and all that is that specific to lit or is that that's specific to lit uh the way it kind of works in vanilla realm and this is just kind of pseudocode uh uh static uh get observed attributes so you basically create a and I think this returns an array like count or something like that and so this is sort of just basically you're registering an attribute that you want to eventually keep track of and then that's an attribute changed when that attribute changes you get notified of the attribute changed callback um so again sort of that uh issue where props and attributes are different it's all sort of showing up now that we're starting to author web components and that's just sort of one maybe sticky point you need to be aware of it is just how props and attributes they feel like the same thing but they're kind of different to html so yes are there limitations on the property names you could use whatever you want or you can use whatever you want for properties you can use whatever you want I it may get uh like what if it's source like an image in actual existing property uh that might be problematic but I could also see situations where you'd change or want to um you'd want like aria or things like that reflected in here checked attributes and stuff like that so um uh that's a good question I don't know how far you can break it or if it yells uh about something existing I mean we could switch this to or yeah I you know I don't think it cares because it's your custom element you know it actually it thinks it's a div the the browser thinks this is a div or a span it says okay cool that's a div or something goes there and then you tell it what attributes it accepts so um there there may be like just weird situations I'm not thinking of um but you know there's also the like in html we have the data hyphen attributes you know data foo equals my value um this stuff all kind of was as you know maybe as dumb as html seems that's intelligently designed because it like data stuff has a hyphen and then your the the element stuff does not have a hyphen so kind of these you know user authored things probably need a hyphen but the element authored things should have a normal unhyphenated thing no no hard rules here but it's just interesting so other patterns that people generally follow no I I mean I think it's just usually like uh like just whatever makes sense this succinctly as possible so um because you're kind of this is your insurance policy that no one is there and there's like um I don't really talk about it but there is like a chance like what if two my counters show up on the page you know oh no what do we do um there's proposals and stuff like that for a like namespacing custom elements so like if I import like this package of components I want it to go into this bucket of this namespace bucket um I don't know the status on that so I don't cover it but there's kind of this idea of like namespaces or sets for components brewery app if you travel to a new town sometimes it's nice to uh go local brewery uh make a dir called demos sure and I'm gonna see the demos great nothing in here okay let me make that bigger there you go um so we are in our we're gonna use our first command line tool I should point out this whole day we have not used a single build tool we have been yonking packages off the ct ends we could have done it on our local computer we have not used a single build tool but we've been authoring web components and and we can build kind of sophisticated stuff without even you know touching any type of tooling whatsoever all the tooling stuff kind of happens at this end this end of the like um writing authoring and even the production stuff is that whole next level of bundling and splitting and everything so when we're here uh there's actually you know I think like the question came up is are maybe inside conversations here but just you know is there like a create react app for web components something that just kind of does shows me how how things work and there is um there's actually a few project scaffolds like vtaz one is pretty good uh but one thing I was one I was showed was from from this open wc group that is really pretty good um and I'll just show it how it works here I'm not really trying to build a dependency on a tool that's not the goal here but I think this provides a really good sort of leapfrog to a few steps into a maybe a more mature project and give us some inspiration how we might need to structure our project to achieve like a production goal but npm init open wc and it's going to give you kind of a little yeoman style interview like what are you trying to do here um so we're going to scaffold a new project and I'm actually going to uh pause here or say you should pause you get an application a web component we're going to do application but I'm going to show you the web component stuff just so we can like vibe out what that does and then I'll switch back here and I'll redo it and spit out an application okay so what's cool is now it asks you like what do you want to add you know do you want to add linting I heck yeah I do do you want to add testing you bet I do do I want a whole entire storybook sure why not it's free uh would you like to use typescript no uh what was the name of your web component I had been calling a customer alert all day uh and then it gives you a kind of a scaffold of what it's going to spit out and you can kind of see we get a storybook we get some vs code extension recommendations uh we get a when you open vs code it's going to say hey do you want to install the probably lit plugin is basically what it's going to install or if you're using prettier or don't have prettier or something else say like do you want prettier do you want just or any kind of test runner format or stuff and then it's going to create a web component for us and it's going to create a story which is what storybook uses and then it's going to create a test a custom alert test and that's actually the part I want to show you because it's it blew my mind um and then a custom alert js I think that's just the the app quote unquote uh that's going to call this right uh and then an index probably calls the custom alert that calls that what uh and then a dev server and a test runner um yes is there a way to do this if you want to like do like a few components you start a library could you go through the same thing or is this really for just like I want to offer this one this yeah this one is like one and I and I was kind of like I wish it could do multiple and maybe I'll like work on pring that because it was uh and they have this upgrade concept and I found that that didn't really work at the time you know I was kind of exploring this um but the but you know you could spit out two projects and then manual merge or something like that it wouldn't be the end of the world because in theory we're making Legos they're all isolated and capsulated reusable you know like so we can maybe copy paste that stuff in pretty efficiently so um okay I'm just gonna we're gonna write to disk and then we're gonna install with npm and it may take some time to install but through the power of technology it'll go quickly but yeah my experience with like I wish this could just like okay new component okay new component okay new because I that would be how I use it you know just rapid fire component generation okay all right so then I'm going to follow what it says uh customer and then I'm going to actually open it in code oh yes I trust the authors all right here we go um always trust strangers all right here we go uh we'll make that a little bigger um and then npm run dev I think is what it said or what did it tell me to do um npm run start there we go npm start okay so now I have a demo right uh fired up over here okay cool hello world nr5 increment number 10 okay cool it has a built us a custom element um and if you look in here custom alert so this is sort of you know just our element I could copy paste all the code we wrote today and and plop it in here you know this is totally something I can do it's basically the component we just wrote but what's what I wanted to show you in the test right it actually comes with some cool tests uh that's a problem for me uh I don't like when I create something I'm not like yeah I just itching to set up the tests on that you know so it's fun to have some like pre maids and and kind of even if they're there I can change the component and then break it and then then I'll I get I'm I when the browser turns red I get upset so emotionally disturbed so I try to fix it um but one cool test that it runs is it passes the accessibility audit so it will actually like mount your fixture of your html component and then it'll expect the shadow DOM to be accessible so if you do anything if you just have this test awesome and this is a feature I think of chai and so it's built on this thing called web test runner I can show you the package.json real quick um but uh yeah so web dev server web dev server storybook web test runner and web test runner is just a I think a wrapper around playwright and so and then I think it uses chai uh syntax or runs chai tests and stuff like that and maybe jasmine too now I'm just making up t names and I know feeling insecure but mocha jai chai jasmine but um it will uh anyway I thought that was cool because I don't do enough accessibility testing in my life and here it is right out of the box and anyway this is just for your inspiration you can like look at it there's another cool thing in here custom element manifest that's what this custom element json is it's a small thing but it's kind of like a registry for your custom element that you then can use to build storybooks and stuff like that it's all cool but it's probably in the advanced talk and then so let's clear this and then we're going to go back to our demos directory and then we're going to build our app right uh and then again this is just sort of like to leapfrog us into a few um oh no I messed up okay we're going to leapfrog into this we're going to do a new project we're going to do a whole application we're going to do linting we're going to do testing we're going to do demoing we're going to do building and that's kind of the feature we want right uh we want to see what this looks like uh if we're going to uh and I'm going to call it brewery app we want to see what this looks like in production I'm going to call it brewery app and then it's going to make me a brewery app and then it's going to say do you want to write this yes I'm going to npm install and it's going to go out and fetch the internet to put it on my computer cd all right let's clear cd we'll go into our brewery app and then we're going to open it in vs code and I trust those authors okay so looking at vs code um you know we have some of this some of the same stuff we have a storybook server we have some vs code extensions you know lit plug-in prettier uh pretty standard um and that's my thing I made that and then we have a logo and then let's do um npm start which is what it wanted us to do okay and we have over here we have a application so uh this is the open wc sort of uh example whatever's you know how the frameworks like to put their logo on the thing you just made um so it does that so brewery app is uh going to be our component it looks like and brewery app with a hyphen is basically just says uh it's going to ingest the app and define the app let's just say goodbye well we'll get that later uh if we have lit here um we're just going to use brewery app and um what's it mad at me lit element is defined but never use okay cool so our next thing that we're going to do is basically set up our app wrapper right uh so class brewery app extend lit element and I can like you know power code some of this stuff but um in our thing you know we need our constructor actually in my example I don't think I even need a constructor that's beautiful weird uh I guess is we're auto doing it um so let's see here um we're going to have some properties right static get properties and we're going to have what would our brewery app need to have in it probably breweries yes brew breweries right and then that's going to be we'll just give it a type that we expect that's probably an array of stuff right um okay and then our connected call back which I think we'll use later we're going to go super dot connected call back and we're getting some auto complete happening that's kind of nice it's working how we expected and then render when to hit our render function html or return html and then we're going to uh you know brewer breweries and then we'll oh and then we'll have like a I don't know h2 and then maybe it's like uh let's see okay yeah here we go I was confused what I wrote down breweries app that's the name of our brewery uh we're going to call it keel breweries keel bureaus uh and brew breweries is one of those words if you say it enough you like kind of stop hearing it you know and then we're going to do like whatever this dot breweries dot length we're just going to say like how many breweries have we found right um and I think that's it like that's all we need to kind of like get going um you know we'll eventually like want to loop through the breweries I guess we could make make our loop or for breweries right now whoa typing bad and then li li one thing so this is kind of where the sort of reacting nature JSXC nature brewery breweries dot map right we all like to map brewery and then we go through and we do that uh I missed this okay we're good so we have all that and then we probably like map through right but we also need to return some HTML I forgot my HTML tag template so we're going to return HTML from inside for every brewery we're going to loop through uh oh this dot breweries eagle eyes eagle eyed observers uh breweries defined but never used so we're going to do that we're going to go brewery brewery dot name and just like echo that out uh block statement is surrounding hold on I'm going to say goodbye to that uh surrounding the body of it hello I'm confused what that is mad about but I'll figure let's see here can it fix itself fix sure dude if that's what you wanted that's what you are so upset about I'm happy for you um cool let's see if this even renders now in our application so it's not so I must have actually needed to have something here um so I don't think I need this who but our index.html is trying to render our brewery app from our brewery source brewery app got it and this is us and brewery app oh we didn't define our custom element define brewery app so the method you just ran the define that could also be a decorator at the top um yeah so that's kind of a like in lit um and I think they have like decorators decorator um it might just be like a feature but yeah so here you can like go like uh define like some syntax they have like like you define is it in parentheses I think it's not but you say like uh brewery app it is it might be doing it here no it wasn't um but that's like the the decorator syntax inside um for lit is like I think you have to import that package but it's it's really nice it actually is pretty convenient and even properties just turns into like app property and you like just like do that instead of this object that I got all stumped on so but then but that define decorator that is provided by lit that's not a like browser native right uh that is part of lit but you know what the um good question let's see here um make you less mad um let's let's look at lit because in all their examples they kind of show um they show these custom elements they show these scope styles oh maybe if you're looking at the typescript thing they have that um and we can actually switch this to typescript if we wanted to um but they have let's go into decorators here we go so okay so we import custom element and then okay at custom element sorry I was way off um so yeah I can like uh and then I can do at custom elements um brewery app which might be a nicer cleaner way for you to define custom elements um uh in the browser or just like you put it all at the top of file you don't have to go back down to the bottom of file yes uh do these decorators in lit also had a build step similar to the ones from yeah so I think because it's not like a fully supported feature right now so it would be something you'd have to kind of compile through I think maybe chrome does but yeah I think like you're still gonna want to do it I would maybe probably just do it all through typescript and then call it a TS file and then know that that's just gonna get kind of fixed as as it transpiles but yeah um but those decorators are pretty cool just I don't use them because I'm more on the like I'm trying not to use too much new stuff um realm but those decorators are pretty sweet for just like short handing a bunch of kind of tedious steps so um so we're running uh here but we're not rendering so let's see what's it mad about cannot read property of length okay cool yeah I mean I guess like I don't know this dot bruise dot length or zero is that what it wants no uh here maybe we'll do that um like so that's just JavaScript there so um it really hates that like that yeah um boy it hates that oh wait map okay it can't do the map either because it really hates it so maybe I'll just do yeah maybe I'll say like uh um whatever super right super but um we can uh just just have breweries equals an empty array right so um hey okay we got something cool brewers all right so that's you know hopefully we get some data from somewhere right so we're not just like you know making this up um so there's um a open brewery db um you know if you don't drink that's fine awesome like uh we should you should totally like make a library app or something like that there's open library this is really just for your demonstration purposes but you know let's go by city San Diego right we're in Minneapolis right now so we'll do that so in our uh connected callback we're gonna do if this if not this breweries and this may be a place where we can initialize too and just say like if this breweries doesn't exist then set it to zero uh but this dot fetch brewer breweries we're gonna go fetch some breweries right so we need to make a fetch breweries okay so async because fetch right we're gonna async uh we're gonna fetch breweries and knew we wanted to do that so we're gonna do here and then um you know so we need to do const response equals fetch and then we're gonna go get breweries but we want to go to Minneapolis mini no in am i close i got it my my uh uh inner midwestern figured it out okay here we go uh and then uh what we do we actually just want the like JSON response so equals oh but we're gonna to await that one and then we're going to await response dot JSON right because it's a promise and then we say this breweries equals JSON response when we get a JSON response then we'll do that um let's uh this should like maybe do it let's see what's going on oh it did not let's see oh because i set breweries let's see here okay yeah we could do that if not breweries that length right because we know we'll have breweries um and there you go i got 20 breweries here in town hopefully and uh okay this is kind of cool if you go into town you can get some breweries check them off your list but wouldn't it be great to like check them off your list or do something like that one other thing we could do is also add a loading right type boolean and then this would be something like you know we'll do this dot loading true before and then this dot loading false right right then down here we could do some cool stuff right um so we could do whatever whatever we want to do here we could we could really like nest it like as much as we want um but we could do like maybe um kind of want to put it down here right so like although this dot loading if this dot loading then like htmlp oh whoa whoa we're gonna just return html loading dot dot dot otherwise do nothing right let's see if that kind of oh it's not working but maybe if we can trick it by messing up the url here so loading right it's just gonna be loading forever it's just the internet's too good here in the front end master studio we're here we're fetching from an api we're getting some stuff we're doing like a you know a if it's loading thing there's another way you know you could do this inline you know you could also do up here if this dot loading and then you could instead return here right so and then i'd basically just return the same thing i just returned might be a more efficient way like so you never actually get to the loading uh you never like get i don't know less if statements in your template is kind of better just in general and it might be more uh yeah anyway okay cool well we got that step in and so like there's a million things we can do but let's just add like a visited state right because that's like what i want to do right i want to keep track of things i've been to and check them off and make sure i'm like going to the right places when i visit new town um so what we want to do is we're probably gonna have to go down here and for every brewery right we're in we have a brewery name right but we probably need a button in here and uh it's very there we go uh button and then like visited or something right like a visited button and we'll probably see that over here looks awful we can solve that we know how to style things um so but one thing we might want to keep track of like how many we visited stuff like that so let's get this button working first though um so button right what do buttons do you click them and then they do something right and so you're gonna just go to this dot uh toggle visited status and then we'll pass the brewery into that just because you want to know which brewery you're going to you could do a brewery id if you want but we're basically just toggling the the brewery uh status uh and i have not closed something and it's very okay i need to close that okay cool um and here down here we'll just do it after the render function um toggle visited status and then it expects a brewery and then then we're going to this dot breweries uh this dot breweries map we'll map through them all we'll find every brewery um we'll you know if the brew goodness code computer you're in the way if the brewery equals like if the the i guess the so we're going to have to name this something else because we're using brewery to update right that that's you clicked on a button you want to update a brewery and so we're going to loop through all the breweries or map through all the breweries and if that brewery equals the brewery to update awesome we have then we have work to do so if that's true then uh we're going to basically like splat out the whole brew brewery and then but we want to set visited which is kind of a new attribute we're like inventing this we're hooking into the the thing and we're like saying visited uh does equals not brewery visited so that will be true on our one but false on everything else and then we need to do the false case and then uh we're just going to return the brewery and let's see if my code formatter kicks in it's so mad at me let's see oh i messed up that's why it's mad at me okay and then brewery is not defined i thought it was you're minusing instead of equaling oh thank you appreciate you okay it's still mad that brewery is not defined um let's see where does it think oh um let's see maybe i can do that maybe i can do trick it to do this all right um extra parentheses there at the end of brews update oh you're saying you're just mapping a boolean right now okay yeah yeah yeah yeah all right so there thank you and now i need to close all that because it's done great okay so now we can say visited unvisited uh but maybe we'll um because we kind of you know it's it's it's good but we need to maybe like fix our button text a bit you know um so we can say like uh this dot brewery visited question mark uh uh mark unvisited right so and then otherwise mark visited this is why javascript is winning the world okay here we go we got this we're gonna just kind of keep formatting to make mice ocd happy and then we're gonna close that and then we're gonna close that and then we're gonna close i don't know where that guy's coming from okay that's the map okay cool um and let's see what's happening oh we still messed up our url no that's fine that's fine but what is this mad about okay oh okay this is a weird bit about like when you do a function inside of here um okay when you want to pass like the brewery you kind of have to do like a anonymous function and then pass that through okay let's see what's uh the browser mad at undefined pro cannot read property visited okay so it must really hate that we did that uh this will be the final segment hopefully wrap up pretty quick here but this will be kind of questions and answers and so if you have some final questions or whatever just get them down get them ready but i'm going to do a quick rapid fire of some like common internet people questions that i get uh that might be helpful or head off some questions you have uh react we kind of talked about it short answers yes right so there's two things this uh lit labs has the react wrapper so you just consume into your web component uh your lit project and you can do that but also react 19 very promising or the experimental branch of react that we think will be react 19 looks promising and so it may be a great time to start looking at web components if you want to i don't know have big distribution and react accessible this is a question that comes up a lot obviously it's important the short answer is yes web components are accessible as you write them right like it's easy to write inaccessible code um but there are a few tough spots in regards to labeling and focus behavior if you can think of it like you have a my input element uh custom my input element and you have a label outside of that how do you associate the label with the shadow thing you know so there's there's a few talks and and sort of like that delegates focus attribute where if you click the label and delegate the focus into the the into the uh element the input element um but the the issue is kind of with labeling is how do you delegate a label or something like that so there's some specifications happening within the uh accept aom accessibility object manager uh but then through the open or sorry the web component community group uh there's some work happening there it seems promising uh but but just know that if you have a label outside of the input like a custom input element you maybe have a problem there you have to yeah you're going to have test it make sure you figure that that stuff's hard labeling and associating is hard but then same sort of thing with focus uh if you pop open a dialogue and you go into an emoji picker there's one an emoji picker right so if you open an emoji picker and you start driving around the emoji picker and you hit escape how's the shadow dom know to go put the focus back on the thing that was last focus because it has no knowledge of the stuff outside of it so that can be tricky and you sort of need to like either emit an event or something to like restore the focus or to the previously active element uh there's also a new inert attribute in html i don't know if or if you've seen it but it's basically says uh take all this stuff and pull it from the accessibility tree and so you could see like a place like a dialogue or something like that you have your your your app up here in your dialogue down here and you just say make the whole app inert while the dialogue's happening and now make the destroy the dialogue and then make this uninert and then in theory the focus should go back to where it was previously again uh that stuff is hard in normal html and javascript uh and it doesn't get super easier in in web component land so that's all you know traversing shadow dom and so on ie 11 short answer yes like there's a polyfill maintained by google so it should be good but i would uh maybe say think about the progressive enhancement quality superpowers of web components maybe you don't need a polyfill maybe the light dom is enough to provide a suitable fallback for ie which just won't even render a custom element another thing you might consider is support for internet explorer it ends on june 15th 2022 and that's usually the time when enterprise companies that are employing ie 11 and stuff like that they usually mass switch their entire company over because they're out of some support cycle who knows what's going to happen but i would pause it i would say if you're starting a project today are you going to finish by june 15th and if you're not going to finish by june 15th of this year uh then maybe maybe you don't need to worry about it so i think most people are not worrying about it at this point so uh reactive context we talked about that yes but it's sort of b y o for now uh frameworks are going to try to help you here um and then uh there is this context api kind of being discussed in the web component community group um seo is a good question there's actually a really nice post link to the guidebook notes but um there's two posts googlebot itself search engine land or whatever search engine hub or whatever on google says googlebot can flatten shadow dom and light dom together so a plus it's not clear if that happens on the first pass or the second pass that that the like typically the like html pass and the javascript pass it's not clear which it happens on um but it can do that and then there's another post that sort of like went through like being in duck duck go to see sort of how they index web components kind of a big test and it seems pretty positive i think being missed it in a few places so it might may need to if being is a big audience then maybe it's important but uh i think this all i'll get better as the crawlers and everything get better uh ssr uh this is a good question um server side rendering like how do you do that right we've been doing kind of everything in javascript and the client that's a big deal well there's a new feature called declarative shadow dom and i'll show it to you right here um this is a web component this is my bill murray alert but i have no javascript but i have written a web component and the magic that's happening here is this template shadow root open so if you put a template inside your alert it'll the browser chrome specifically the browser will say okay i know what to do with that i'm just going to try to render that on a pass and then when your component actually comes through later and upgrades it to be like fully interactive it'll actually tear down that old template and put in a new template um or just upgrade your current template um however you have it uh so that's cool um i think like what i learned was this might be another great way to provide kind of skeleton content uh to provide some content what i don't like about it if i'm completely honest is like if i'm just like writing the whole template inside of here maybe i should just use php uh just to get the server render uh that's a totally valid opinion in my opinion because it's my opinion and uh but the i think you know we're all using some kind of preprocessor of some sort whether it's a static site generator or something so maybe there's a way that you can do that efficiently and not you know you don't have html in one place and script in another place or maybe there's eventually a tool that will be able to like recognize your your template and then kind of automatically pre-parse that sort of stuff so i'm sure all that stuff is kind of in the works but declarative shadow dom can do like very server-side rendering that'll reduce your paint times and stuff like that um okay um any questions before i wrap it all up chat as well if you have questions yes do you have any guidance or best best practices for focus locking finding all focusable elements or including elements within the shadow dom um okay how do you find focusable elements in the shadow dom um so that delegates focus will find the first focusable element um i'm not 100 clear on what rules it does to determine that um but it's probably like inputs and then tab indexes and stuff like that there's probably an order of operations that tries to fetch those um and then tips for managing focus was that the question mark it was tips for um focus locking focus locking like oh like uh the trap uh yeah so if you had like this custom element pop up thing pop up how do you like trap the focus inside of it um i would honestly right now look at that inert attribute in the inert polyfill and basically you inert everything else and then that little chunk of content becomes the only thing the cursor can kind of move around on and then you destroy this and uninert that and then you're back to uh where you want to be so that would be my like look into the inert attribute it's being implemented i think in chromes fari and all kinds of things so and then there's a pretty good polyfill for it so one more question here we go how do you think about css property naming and usage in the context of web components such as you know prefixing variable names on a per component basis or uh defining them in a host versus was defining them on root right okay cool yeah um so how do you like css custom properties if we're going to use that i like the like namespace like your variables have the same name as your element like namespace so you'd like that shadow scroller which like shadow scroller uh uh what was it strength or something so like how the radius i like that because it's very specific and i know it's there's not going to be a side effect you know there there's a chance you know if you name something at the top of your document you know and then this custom element is looking for the bg attribute you know there might be a conflict because you set it up here but you did not want it to go in the custom element easy enough to redefine it because that's how css variables work you can define something up here and then you can redefine it down here with no con no problems to the rest of the page that's kind of the nature of the cascade um so there's less less massive fallout than like changing a sass variable or something um but you know in where should you apply it you know at the root or host um you know i i think it does not matter uh you know i think people started using root colon root for their css variables just because i think some example used it we it doesn't have to be there it can be a body it can be on html we just for some reason root we everyone just gravitated oh we should just do that you know and that's i don't know weird but host i like host just because you're saying like everything in this custom element is going to be use one of these but it doesn't matter that's the nature of css it just picks up where it where it does so it tries to figure figure it out if you have more questions it's fine we can you can reach out uh or whatever we can figure that out um uh but wrapping up i just wanted to kind of make just a couple points uh web components build into the web platform your custom elements we saw through the reusability right uh you can just give somebody a custom element they didn't have to install a new tooling you're not building into zucks framework you're not building into google's framework you're building into the web uh we can just share web things with each other kind of like what we're doing with spicy sections your uh web components can provide blueprints for richer native elements you know whether that's tabs accordion select menu list box your web components are a little bit closer to like how the browser would operate right and there that's native web tech we don't have to put react in the browser just to get your idea into the browser uh these are native web tech and i've even seen uh uh through open ui i've seen uh elements that are coming out and they are using the part syntax so that under the hood they're kind of basically just a web component i don't think they are but they're using that that part syntax to let you target specific pieces of the ui of like the date picker or the pop up the select menu or something like that so that's all very interesting like this stuff is kind of now informing like how actual html might work not just shadow realm stuff um so these blueprints you know if you make them and it's tested and there's test suites like and there's demand for it they can maybe be built and i think you know if we had tabs elements if we had accordion elements if we had all this stuff that made it easier to build a website without just installing everything you didn't have to be a computer scientist just to make a website i think that would make a big difference for the web it'd be more inclusive allow more people to participate allow you know anyone uh moms grandmas everyone to kind of build the website of their dreams and i think that's really important and i think it's you know this the goal is still to have a web for everyone so with that let's build a web for everyone so thank you and i hope you uh makes cool stuff thank you