蜜豆视频

Transcript

Good day everybody. Welcome to roll your own HTML with web Components.

My name is Raymond Camden. I鈥檓 a senior developer evangelist for 蜜豆视频 focused on Acrobat Services. Also working with our Firefly services as well. And if you need to reach out to me for any reason whatsoever, you can find me at Raymond camden.com.

Everything about this presentation, the slide deck, all the demos, you could find all of them up on GitHub at the URL above. Feel free to scan the QR code as well. But again, the demos you鈥檙e welcome to download, play with and try them yourself. So my game plan for today is relatively simple. I鈥檓 talking about the what of web components, the why and spend most of the time talking about the how, you know, looking at the code, running examples and so forth.

We鈥檒l also have some examples at the end, and we鈥檒l talk about some some basic next steps for, what to think about, to do next.

Now I will give you a quick warning. The specs and stuff that I鈥檓 talking about today, they鈥檝e been around for a while. But personally, I鈥檝e only been working with web components for maybe a year or two years or so. It also feels like as a community, web folks have been talking a lot about components over the last year or so.

For what? For whatever reason. It just seems to be having a moment. People are really talking about it. And I will warn you that, I feel like how we do it and the best practices and what鈥檚 considered standard. I feel like that鈥檚 still a little bit in flux. But that won鈥檛 stop you at all from learning how to build these and start using them today.

So let鈥檚 start with the what? So web components are the ability to create your own custom HTML elements. And this includes you know, what you expect from the web platform and HTML in general. It鈥檚 how something looks as well as the interactivity of how that element, operates.

You will define this with JavaScript. And the basic idea, basic thinking behind this was first introduced 13 years ago. So like I said, you know, this has been around for a while.

It pretty much very well supported. There鈥檚 a couple minor caveats. There鈥檚 one specific example that I鈥檒l mention that impacts Safari. But in general, you鈥檒l be able to use this and just not worry about it.

So they鈥檝e really come down to kind of three core technologies custom elements, a shadow Dom and HTML templates.

So before we talk about like the how and sort of digging into the, you know, how you actually build these things, it鈥檚 probably important to ask why.

So one item is that you get reusability. So if you鈥檝e ever built a kind of custom part of a website and needed to build it again, having a component makes it really easy to kind of reuse that in multiple places. It also gives you a certain type of consistency. Now of course you can do that with just having standards for, you know, always applying so and so CSS and you know, laying out tables a certain way or web components will just make that easier. Also obviously frameworks and UI library libraries. I鈥檓 a big fan of shoelace. It鈥檚 a UI library, all built in web components. And I think that is a great place where you could see web components being used. Also progressive enhancement. This is something that has gotten a lot of attention lately, but, components can be really handy to take, you know, standard working age HTML and just add more stuff to it, add more cowbell. You can say. So I actually have a great example of that coming towards the end that I think will, make it clearer. So that was, you know, the words and the why. Let鈥檚 now look at the how.

So first thing we鈥檙e going to talk about is custom elements. Now think about it. What happens in your browser and the web in general when an element is not recognized. Let鈥檚 dig into it. So I鈥檓 going to open up a web page. And I have a nice little warning to myself to open up DevTools and let鈥檚 make this a little bit bigger. There we go. And you can see that in the elements I have here, I have something that is called foo. That is not a valid HTML element. But when you鈥檙e looking at the web page, you you can鈥檛 tell. And this has been something that the web has done for 20 plus years now, is try to do its best to show something to to render to the page as best as possible, such that even when things break, you can still read the content.

Now, if we actually want to look at this document.queryselector foo and we鈥檒l look at the constructor for that. And you see it鈥檚 an HTML unknown element. Really, it kind of boils down to a div tag because you could see it added, you know, an implied line right there, acted like a div.

So how do we fix that? How do we, support the foo tag? And this is where Custom Elements API comes in and helps us. So it lets you define a custom element such that you will give it a name. You must use kebab case and you must have a dash. So we can actually add a food tag. But we could do a food something tag. You will then define the JavaScript class. Now, I鈥檝e been using JavaScript for a very long time since it first came out. And I know that it has supported classes for a while. It鈥檚 not something I actually really ever used in production.

And working with Web Components was the first time I did. And I had no trouble. You know, if you look at this sample here, you can see that I am defining a class. I鈥檓 calling it Foo cat. I will extend HTML element, and then I鈥檒l have a constructor that always calls super. And then in there I鈥檓 going to do whatever makes sense. Last thing I鈥檓 doing is using the custom elements API. I鈥檓 defining what my custom element is. And again that鈥檚 the name kabob case with a dash and pointing it back to the class, that I just created. And that鈥檚 pretty much it. I mentioned that web components are very well supported, with minor exceptions. In the spec, there was this idea that, you could create a web component based on another component. So each HTML element is like kind of base core Dom thing. The spec did support this idea of, hey, I want to take a list item tag and I want to modify it. I want to take a input field and modify it. Spec supports that. Safari does not. Now, that does not mean that you can鈥檛 make list item type web components or, you know, make things that look like tables. You just can鈥檛 extend the core, each HTML tag for those things, you could pretty much only start from scratch, which is going to be okay.

So when you鈥檙e inside your constructor, you will render out something you know, based on what your particular element is doing. In this case, this refers to the Dom for the web component. I鈥檓 just going to say my inner HTML is that. You will see some examples where, especially on the Mozilla Developer Network, where instead of just straight up writing the inner HTML or inner text, they create a p element. They set the tags on the p element, then they append that to the Dom. You can do that. But I think when you look at that one line on line five that is super, super simple. So let鈥檚 look at an example of this. We鈥檒l open that up and you can鈥檛 see much. So we鈥檒l open up DevTools. And you can see I have two cat. I have a couple few cats. And if we go into the code for that, this is the HTML that you just saw. I have two full cats, and I have my script tag at the bottom. By the way, when I give presentations or do simple demos like this, I always try to keep it as simple as possible. Absolutely. You should be defining your JavaScript in a different file and including it again, and just kind of keeping it simple. But this is the same code that you saw, on the slide. I have defined my class. So I鈥檝e defined what it does and I鈥檝e said custom elements dot define. And that is where the meow meow is being rendered. Let鈥檚 go back in there and look at it. And you can see. And there are and here are my custom elements right there. So far so good. Nice and easy elements squeezy. Now you probably want to have your elements. Are your, your web components do something different based on how they鈥檙e used. And that鈥檚 where attributes come in. Same as regular HTML elements. You can have any attributes that that make sense.

Your code though has to actually look at them and then do whatever. Okay. So how you will do that. And this is the same, code that you, that you would use if you are working with the Dom anyway. But in this case, I鈥檓 saying if this particular component has an attribute name, I want to set a variable equal to the value of that using get attribute. I went ahead and defined a default there. That behavior is completely arbitrary.

You may say, hey, if you don鈥檛 pass a name, I render nothing. You know, you could do anything you want, but in this case, I just said default value. Look for the attribute, and then output that out.

And if we look at this, I have two full cats. And if we look in the elements here, you can see full cat with no attribute. And one with an attribute of name equals Zelda. And we鈥檒l look at the code real quick, but it鈥檚 pretty much exactly what I just showed on screen. That simple.

All right. To show you kind of more of a real world example. I have a simple image placeholder web component called place pixel. It鈥檚 using the pixel that photos, placeholder service. And all it鈥檚 going to do is basically spit out an image source based on a height and width that I pass in, defaulting to 250. And if we look at an example of this, maybe it鈥檚 a bit more room. I could see two images. First one, I did not specify anything. The second one I did. And again I鈥檒l show you the code. But it is going to be exactly what you saw. And once again that that logic of 250 is a default. Totally arbitrary. You鈥檒l also notice that I鈥檓 getting the values for height and width, and I鈥檓 not doing any validation. I absolutely could. And like if you passed a non-numeric value or a value less, zero or less, I could switch back to 250. If you pass a value over a thousand. I could do something there as well. You know how how much logic you put in there? It鈥檚 completely up to you.

So I said attribute two is same as regular range. Some elements mostly. There鈥檚 a little caveat on that is that if your attributes can change, you need to write logic for that basically. And you have to actually handle what that means. So it鈥檚 kind of a two fold, two fold thing that you have to do. So the first thing you do, and you can see this on line eight, is my web component has to kind of broadcast out or say, these are the attributes that I care about. If something were to change and you will return an array of the attribute names that you cared about, you will then have an event handler attribute changed callback that gets passed the name of the attribute and the old and a new value. And then you will do whatever again, whatever makes sense for your particular component.

So if we look at a demo for this and that needs to be place some two because my old beacon server went away, unfortunately, you could see two more examples in here.

And I am going to use the console and we鈥檙e going to say Document.queryselector place. Pick some. Let鈥檚 just see which one we got. We got the first one and we are going to change set attribute with 207 hundred something nice and big. And it鈥檚 going to change. You see we have a new image there. But the reason that worked is because I wrote the code in there to make that work. And if we look at that, you could see here I鈥檓 saying I care about width and height and I, I may have more attributes in there where I don鈥檛 care if they change. In this case, I do care about width and height and all I do is listen for them. I update my width and height based on the new value, and I changed my, logic to display to a couple more functions. You see, I have a render here, which calls get URL, which looks at the height and width. My constructor made use of this dot render as well. But now, you know, I can tweak width and height, and every time I do, it鈥檚 going to rerun render, which will get a new URL, which will update what you see on the front end.

All right. So some more events. Connected callback. We鈥檙e going to see an example of that in a moment.

Disconnected. And I should say I first, connect call connected callback is run when the web components actually added to the Dom. Disconnected callback is the same as when it鈥檚 taken out. Why? You may need that. You could build a web component that does something on an interval like maybe every 60s it calls an API and and updates what it鈥檚 rendering. If you have that interval running, you may want to know when that Dom element is taken out. If it鈥檚 killed by whatever process the disconnected callback gives you a chance to say, hey, I鈥檓 being killed. I鈥檓 being taken out of the Dom. Let me clean up that interval. Adopted callback is a bit weird. It鈥檚 essentially when a web component will move into a new document. I haven鈥檛 seen an example of that. I believe it could be a case of moving something from an iframe to a parent document. That seems really esoteric in terms of how it could be used, but it鈥檚 there. And we have attribute changes callback, which you鈥檝e already seen an example of. But I really want to focus on the connected callback. So you鈥檝e seen a couple examples of me, you know, doing this full cat, custom element, with or without a name attribute. And it worked just like a built in HTML tag. But what if instead of, you know, doing it that way, I鈥檇 done it later. I鈥檇 done it via JavaScript. If I had define the full cat as a custom element, I could then make new ones. And you can see there in that, second script example that I just appended to my body. So what happens? Let鈥檚 first run an example where, you know, you could probably guess something bad is going to happen. We will do C-C fix that HTML. And before I click that button let鈥檚 look at the code going CC fix. All right. So I still have full cat. My button is running a function called add cat. And it鈥檚 going to do what I showed in the slide. It is going to create a new element for full cat and append it into the document. Make sure I鈥檝e got my console open again. You could probably guess there鈥檚 going to be an error. The result must not have children and what is essentially happening is that when this was added and I tried to read the attribute, it wasn鈥檛 in the Dom yet. So it didn鈥檛 have any attributes. And it essentially broke. I could not use the constructor. The fix.

Is really, really simple. Instead of using my constructor now to, you know, look at my attributes and, you know, render out I鈥檓 now actually running this when I get put into the Dom itself. So that logic later on on line 37, where I create a new instance, the constructor is doing nothing but running super. And then when I actually add it into the Dom, that is when, my connected callback will run and actually do the work. So if we run this just to make sure I鈥檓 not making stuff up, we will see that this runs just fine. So my kind of takeaway from this is that, I will do most of my work and connected callback. If you look at like my very first blog post on web components, I wasn鈥檛 using it probably by my first couple. And then I ran to this and I realized and this shifted my logic. I shifted how I do things to pretty much nothing in the constructor. And you know, this is how we learn, right? So that is at a high level, the Custom Elements API. Let鈥檚 talk about the shadow Dom. Not nearly as cool as it sounds.

It is essentially, an encapsulated Dom tree for your component.

So if you kind of look at a webpage as this Dom tree, you know, body tags, div tags, p tags, everything contained within itself. Shadow Dom is going to be essentially an encapsulated version of that. You can actually hide this Dom from JavaScript. Don鈥檛 really know why you would want to, but you can. And it will do things like preventing CSS leakage. So if you have a paragraph in your web component and the site using it as CSS to find for a paragraph, you can stop that CSS from applying to your paragraph that way. So you鈥檝e already actually seen examples of this. If you do any of the, you know, fancy input types like date, color file and so forth, that is making use of the shadow Dom. We鈥檙e going to open this up and go into elements.

And you will see probably not at first I鈥檒l explain why.

Input type equals date. And you could break it up into a shadow root. So if you don鈥檛 see this when you open up your dev tools, there鈥檚 actually a setting that enables this. And let me say they always kind of hide this. There is somewhere in here.

There we go. Show user agent Dom. So in Chrome and an edge, this is a setting that you turn on. It鈥檚 off by default. But when you enable it it does allow you to look at the shadow Dom of your built in things like input type equals date. And you can actually go in here and see how they built that. You could see all the little parts of little components, etc鈥�

Span, if you want to, you can dig really deep into that. But all three of these input types have multiple parts in there even. No, they are just input type equals file.

So the way that you use this in your web component is you will work with the shadow root property and not just the disco. So instead of in instead of like this, that inner HTML, instead I鈥檒l do this dot shadow root, I have to attach it first. And that鈥檚 on line nine. That modal equals open means external. JavaScript could dig into that and look at it again. I don鈥檛 know why you would want to not have it that way, but you can. And let鈥檚 look at an example. Let me get to the code first. All right. So again full cat. And this is the shadow version looks very similar to before. Attach my shadow root set the inner HTML. I will say I see a lot of examples that create a object when they, run this on attach shadow that does return the shadow root, but you don鈥檛 need to keep a variable for that because this scope has a shadow root property. So this, you know, not really a waste per se. It鈥檚 just not necessary. You can just attach the shadow and then work with shadow root. Let me go back to a browser here. And if we get into here we could see we have a shadow root. Very simple Dom tree of just one paragraph.

So why would you bother with that? Like I mentioned a few minutes ago, and any CSS to find the parent is not going to impact the component. The component can more easier. Easily define its own CSS without breaking other parts of the web page. And if we look at an example of this shadow two and let鈥檚 get into the HTML. Now I have made my full cat a little bit more complex, where I鈥檝e defined a style for the p tag, with the nice little rainbow rule, etc. I have attached that style to my shadow root, and then created a paragraph tags with the inner text that it. And if you鈥檒l notice, I do have a paragraph style defined for the page of pink, but that is not impacting my web components. My regular p tag is pink. My web components are not. So if I鈥檓 building something that I鈥檓 giving to external parties using this means I don鈥檛 have to worry about any CSS like that that they may have created, in their own site.

Now, there are some, CSS selectors that you can use in there, for example, host to essentially refer to itself in a more abstract way or myself with a particular selector, you can even do things like, hey, you know, if I, if my web component is inside a table or something else, a particular selector, I may have different CSS for that. I鈥檒l show you an example. And you can see all kinds of colors there. But let鈥檚 actually switch to the code shadow three. So I defined in red that blank space there.

A host a host context and a host pink. And if you go back up to the HTML, I have fu cat. I have fu cat within black quote. And it鈥檚 essentially going to pick up right there. The particular CSS. And I use blue and red and did I use, pink anywhere? Oh I did, yes. My third example, I gave too much white space there.

This particular Fu cat with a classic pink will match that. And if we go back to the code, you could see all three in action. Again, I don鈥檛 do a lot of success. I do the bare minimum. But the support is in there, which I think is really, really darn nice. It gives you a lot of power. So the third aspect of web components.

The HTML templates, the template tag allows you to define HTML and CSS that鈥檚 not actually rendered to the page. Instead, the idea is that you can clone this and append it to the Dom, and typically you clone it and change it somehow and then appended to the Dom. I don鈥檛 like it, and this is absolutely my own soapbox, my own personal feelings on this, and I reserve the right to deny that I ever said this. But let me show you why. And a demo. So we have template one dot HTML. Let鈥檚 get that code open. And what I鈥檝e done is in my page, I define a template tag, I give it an ID, my paragraph, and then I have a my paragraph web component and what it does is it looks for that template, it grabs the content, and then it clones it and drops it in. So one nice aspect is that if I wanted to write a lot, a lot of HTML, it is nicer to type in here T and type in, you know, in HTML space versus setting a lot of HTML and JavaScript.

However, what this means is that if I want to distribute my, you know, my paragraph web component, I can鈥檛 just do a script tag. I have to tell you, you know, you need to drop this code into your page and to every single page that鈥檚 using it. I again, my personal soapbox. I don鈥檛 like that approach. I don鈥檛 think it makes sense for web components. Absolutely could be wrong. I will say I don鈥檛 really see people using this very often. But keep that in mind if you want to make use of it. I typically don鈥檛 do that, but there are some interesting workarounds where what if you do want to define how your web component works in HTML? That way? I would say the better way of doing it is with slots. Slots are a way for any particular calling document. But when I say calling document, I mean the, document that is making use of your web component, a slot is a way for that, that document to send information to the web component. This could be a default slot or a name slide, and it uses a t slot.

HTML element and slot name equals something for a named one. This requires a shadow Dom. Feel like none of this makes sense. So let鈥檚 look at an example. We鈥檙e gonna look at profiles one through three. So let鈥檚 open this up. This is profile one. Let me show you the code for this. So I built a web component. And the idea is to build like a card for me like a simple UI element that shows my name, etc鈥� And it supports name, email and bio. And you could see, in my HTML, that bio was a very, very long string. And if I want to do any quotes on the inside, I, I can鈥檛, you know, I have to escape it, or use single quotes so it works. You know, you can see here I rendered out it works, but we can do this better. And let鈥檚 look at this example here. Let me show you the HTML first. So I still have profile card. But then I put some text on the inside. And what happened is back in my web component when I have this slot tag here, when this web component is rendered, anything that was inside a web component goes into this default slot, and that is where it is rendered.

Excuse me. And I have control over it. So, you know, I put it after the email attribute, but if I wanted it before email, I could do that as well. So, you know, I have the ability to kind of change how, that鈥檚 shown. And again, all this automatically just shows up and let me just prove to you that鈥檚 working, because maybe I鈥檓 lying. And there you go. You can see my bio. You could see all that works really well. Third example for, Hey, okay. We showed this example for two reasons. So if you want you can even specify default text for what would be in this slot. In this case it鈥檚 the text between that鈥檚 the opening and closing slide. And you can see I don鈥檛 have anything there. So I should see the default. Let鈥檚 go to profile three. There it is. And as you maybe saw in the source hey when presenting hit enter. So I may have read my email like this. And now when I reload it it鈥檚 gone. The reason being is that that default value slots only use when nothing is set. When I hit enter, I was actually sending one character, for that slot, so it put it in there, but the carriage return in there. So just keep in mind that if you are using this behavior, if you want to make sure that you drop that component in with nothing in the middle of it.

Now that is default slot and name slot is basically again a slot with a name.

In the calling document, you will refer to the named slot, and you could see it鈥檚 just an attribute. So I have a p tag and I鈥檓 saying, hey, stuff my stuff into the foo slot and let鈥檚 look at an example and we go here. So my profile card is getting a bit more complex. I have both named the slots and a default slide. So I have a slot for jobs, I have a slot for books, and then I just have Willy nilly Tex. And what happens is that in my web component and I said, hey, I want you to put, my bio on top, and then my books and my jobs and notice that鈥檚 a completely different order than how I sent it. And that鈥檚 fine. The web component got that data, slotted it the right way, and you could see there鈥檚 my bio and there鈥檚 my books and there is my job. So really powerful. I think it works really, really well.

Let鈥檚 look at some examples. So the first one I鈥檓 going to show is a PDF embed viewer. 蜜豆视频 US, we had this great 蜜豆视频 PDF embed API. I鈥檒l open it up just to show you real quick, this is a free JavaScript library, that lets you embed PDFs onto a webpage.

My web component completely removes the need for any JavaScript. At least, you know, written by you yourself. This is kind of the default code for working with PDF embed. And it鈥檚 not bad. That鈥檚 like ten lines. You know, essentially I have a div where I drop my PDF, a load in the 蜜豆视频 PDF embed library, and then essentially you say, hey, when you鈥檙e ready, create a view, point to this URL and render that thing out again, ten lines of code. You can do this in like two minutes. However, this is even simpler where I built a web component. I鈥檝e, I鈥檝e, script sourced it in and then I could just do PDF bed. Here鈥檚 my URL and here is my key. And we鈥檒l open this up in code pin that. Give us some room here and there is my embedded PDF. I鈥檒l make that a little bit bigger.

And you can see this code. You know it鈥檚 a little bit more fancy than what I鈥檝e done before. This was when I was first learning. So you see, I鈥檓 still doing stuff in the constructor. But I look for the URL, the key height and width. Embed mode and all that, and I just essentially kind of handle, doing everything for you. I did you can do call back as well. I use a little bit of logic to automatically include the library to make that a little bigger as well. But essentially if you get my web component, then and long as you get a client ID to work with the library, it鈥檚 going to be a lot easier to use than the one I built a little placeholder. It, lets you create placeholder images without using an external service. One I you saw earlier, I had a demo for a place. Bacon. Unfortunately, that has bit the dust.

But you can also do placeholders entirely. And SVG, which is not an image, but it is an image, and you know what I mean? So what that allows me to do is say, hey, placeholder height, width or, you know, here鈥檚 a color, here鈥檚 some text. And that code pin, you can see if you focus on the HTML first, there鈥檚 a basic placeholder. No attributes. I could then, you know, start specifying height, width, background color and text. And the only thing I鈥檓 doing is essentially changing the SVG that I鈥檓 outputting. And I won鈥檛 go over every line of this. But you will have a link to the code pin, and you could play with it yourself. I like that example. This is my favorite example though, for a couple of reasons. So you could take a regular table, rapid and a web component, and you could instant sorting and it doesn鈥檛 break without JavaScript. Now I鈥檒l explain why in a second. So you can imagine a table. So a long, table of cats. And I want to add sorting to it without writing in the JavaScript myself. I can wrap it and a table sort web component and that is it. And if we open this up in code pin, there is my table, there is the HTML. And you can see I wrapped it. I did have to use an attribute, to make sure that the sorting was done correctly. All I did was basically say, hey, here鈥檚 a list of columns. The sorted numerically, one based because we鈥檙e humans, not computers. And the fourth column needs to be sorted by a number, not by a string. But that鈥檚 all I did. I wrapped it and now I can click and I could do sorting and reverse sorting based on my data. I really, really like this. I don鈥檛 have a link in this particular, presentation, but I built a similar web component that takes a super long table and basically prompts it to ten rows. And you can click to expand. Which is nice because it allows you to put a big table on a web page and shrink it down. And again, if for some reason my JavaScript breaks or let鈥檚 say it鈥檚 not loaded because of network and, conditions, this is a progressively enhanced web component. So that table still shows up. They are not, they鈥檙e not broken in any way whatsoever. Again, I won鈥檛 go over every line of code. I鈥檓 basically just going and going through and doing a lot of Dom individuation essentially is storing a copy of the data so that I can sort and redisplay what I want to I also have a version of this that, and what does it add at sort of. Oh, pagination as well. You can get pretty, pretty fancy with this, but I think sorting is enough for right now. Some next steps for you to think about. Just some more stuff. Web components can participate in forms. And by participate, what I mean is they could say, hey, when you submit this form, I have data and I鈥檓 going to tell you what the data is because I鈥檓 weird and special and unique. I鈥檓 a special snowflake. So they web component could basically, you know, broadcast when you鈥檙e ready to submit, ask me for my data and I鈥檒l give it to you. They can even do stuff like if the user hits reset. I have special logic for that. It is not simple. Yeah, but I have a link to a blog post on it. It鈥檚 possible I found it a little bit hard to do. There鈥檚 also a upcoming spec called Declarative Shadow Route where I encourage you to read more about it. I鈥檓 not going to talk about it today. Also, very early. I don鈥檛 think I was given a formal spec for it, but there are people talking about what if I want to define a custom HTML attribute, not an element, but an attribute such that, if I add a cow dash bell attribute to a component, I want to be able to, write JavaScript to handle what that means. I have no clue of that will ever see the light of the day, but it does. It does sound rather interesting. There are multiple libraries out there. I have not used any of them. I鈥檒l be honest, because I when I first started looking at this over a year ago, I really wanted to learn it the hard way. You鈥檒l learn, learn, learn the spec, right. And I, I didn鈥檛 find it that hard. So, you know, I know that lid, for example, has a huge following and people really like it, but I don鈥檛 mind writing compounds myself. So I have not just felt the need to go into a library to make it simpler, I鈥檒l also talk about the fact that we do have, some alternatives out there that do server side web component rendering. Me being an old school ColdFusion guy, this feels like everything all this new again or everything new is old again. One of those, but for example, web C works with a static site generator. Eleventy. I鈥檓 a big fan of that. But it basically allows you to write web components such that when eleventy actually generates your final HTML, it converts it from a, JavaScript based component to just HTML. So it鈥檚 it鈥檚 something to think about if you are using those tools.

Finally, in terms of who using it, big people are using it YouTube, GitHub, DB2 and so forth. There is a cool web browser extension called Custom Element Locator. Oh, it may be gone. Well, there was a one called Custom Element Locator, I鈥檓 pretty sure know I still have it. But if we open up GitHub and click on this extension, it will actually tell you the web components being used on this page. So if you are interested in how other people are doing it, I want an easier way to introspect. You can check out this extension if it still exists. Who knows why it鈥檚 not there anymore. And I will leave you with some with some resources. MVVM typically is 100% my go to thing for anything web related. I honestly, I found there are docs on this just to be a bit hard to wrangle my head around. It鈥檚 open source. I should send in a PR to make to make it better, but for whatever reason I found their docs just hard to follow, and it鈥檚. I鈥檓 gonna put that all on me. There鈥檚 also some websites, web components. Org, open web components. Also Ben Farrell, fellow 蜜豆视频 in did write a great book Web Components in Action. It is 4 or 5 years old. And I found maybe 1 or 2 things in it when I was looking at it, that, that weren鈥檛, that weren鈥檛 good now. But outside of that, I think I would still recommend it. So I hope that these resources help you.

I hope this has been useful and enjoy building your own custom web components.