Roll Your Own HTML with Web Components

Transcript

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

My name is Raymond Camden. I’m a senior developer evangelist for Adobe 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’re welcome to download, play with and try them yourself. So my game plan for today is relatively simple. I’m 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’ll also have some examples at the end, and we’ll 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’m talking about today, they’ve been around for a while. But personally, I’ve 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’s considered standard. I feel like that’s still a little bit in flux. But that won’t stop you at all from learning how to build these and start using them today.

So let’s 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’s 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’s a couple minor caveats. There’s one specific example that I’ll mention that impacts Safari. But in general, you’ll be able to use this and just not worry about it.

So they’ve 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’s probably important to ask why.

So one item is that you get reusability. So if you’ve 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’m a big fan of shoelace. It’s 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’s now look at the how.

So first thing we’re 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’s dig into it. So I’m going to open up a web page. And I have a nice little warning to myself to open up DevTools and let’s 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’re looking at the web page, you you can’t 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’ll look at the constructor for that. And you see it’s 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’ve 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’s 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’m calling it Foo cat. I will extend HTML element, and then I’ll have a constructor that always calls super. And then in there I’m going to do whatever makes sense. Last thing I’m doing is using the custom elements API. I’m defining what my custom element is. And again that’s the name kabob case with a dash and pointing it back to the class, that I just created. And that’s 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’t make list item type web components or, you know, make things that look like tables. You just can’t 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’re 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’m 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’s look at an example of this. We’ll open that up and you can’t see much. So we’ll 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’ve defined what it does and I’ve said custom elements dot define. And that is where the meow meow is being rendered. Let’s 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’re used. And that’s 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’m 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’t 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’ll look at the code real quick, but it’s 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’s using the pixel that photos, placeholder service. And all it’s 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’s a bit more room. I could see two images. First one, I did not specify anything. The second one I did. And again I’ll 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’ll also notice that I’m getting the values for height and width, and I’m 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’s completely up to you.

So I said attribute two is same as regular range. Some elements mostly. There’s 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’s 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’re going to say Document.queryselector place. Pick some. Let’s 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’s 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’m saying I care about width and height and I, I may have more attributes in there where I don’t 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’s 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’re 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’s 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’s rendering. If you have that interval running, you may want to know when that Dom element is taken out. If it’s killed by whatever process the disconnected callback gives you a chance to say, hey, I’m being killed. I’m being taken out of the Dom. Let me clean up that interval. Adopted callback is a bit weird. It’s essentially when a web component will move into a new document. I haven’t 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’s there. And we have attribute changes callback, which you’ve already seen an example of. But I really want to focus on the connected callback. So you’ve 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’d done it later. I’d 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’s 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’s 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’s 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’ve got my console open again. You could probably guess there’s 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’t in the Dom yet. So it didn’t 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’m 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’m 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’t 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’s 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’t 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’ve 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’re going to open this up and go into elements.

And you will see probably not at first I’ll explain why.

Input type equals date. And you could break it up into a shadow root. So if you don’t see this when you open up your dev tools, there’s 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’s 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’ll do this dot shadow root, I have to attach it first. And that’s on line nine. That modal equals open means external. JavaScript could dig into that and look at it again. I don’t know why you would want to not have it that way, but you can. And let’s 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’t 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’s 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’s get into the HTML. Now I have made my full cat a little bit more complex, where I’ve 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’ll 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’m building something that I’m giving to external parties using this means I don’t 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’ll show you an example. And you can see all kinds of colors there. But let’s 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’s 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’t 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’s 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’t 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’s get that code open. And what I’ve 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’t 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’s using it. I again, my personal soapbox. I don’t like that approach. I don’t think it makes sense for web components. Absolutely could be wrong. I will say I don’t really see people using this very often. But keep that in mind if you want to make use of it. I typically don’t 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’s look at an example. We’re gonna look at profiles one through three. So let’s 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’t, 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’s 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’s shown. And again, all this automatically just shows up and let me just prove to you that’s working, because maybe I’m 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’s the text between that’s the opening and closing slide. And you can see I don’t have anything there. So I should see the default. Let’s 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’s 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’s just an attribute. So I have a p tag and I’m saying, hey, stuff my stuff into the foo slot and let’s 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’s a completely different order than how I sent it. And that’s fine. The web component got that data, slotted it the right way, and you could see there’s my bio and there’s my books and there is my job. So really powerful. I think it works really, really well.

Let’s look at some examples. So the first one I’m going to show is a PDF embed viewer. Adobe US, we had this great Adobe PDF embed API. I’ll 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’s not bad. That’s like ten lines. You know, essentially I have a div where I drop my PDF, a load in the Adobe PDF embed library, and then essentially you say, hey, when you’re 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’ve, I’ve, script sourced it in and then I could just do PDF bed. Here’s my URL and here is my key. And we’ll open this up in code pin that. Give us some room here and there is my embedded PDF. I’ll make that a little bit bigger.

And you can see this code. You know it’s a little bit more fancy than what I’ve done before. This was when I was first learning. So you see, I’m 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’s 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’s a color, here’s some text. And that code pin, you can see if you focus on the HTML first, there’s a basic placeholder. No attributes. I could then, you know, start specifying height, width, background color and text. And the only thing I’m doing is essentially changing the SVG that I’m outputting. And I won’t 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’t break without JavaScript. Now I’ll 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’s a list of columns. The sorted numerically, one based because we’re humans, not computers. And the fourth column needs to be sorted by a number, not by a string. But that’s 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’t 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’s say it’s not loaded because of network and, conditions, this is a progressively enhanced web component. So that table still shows up. They are not, they’re not broken in any way whatsoever. Again, I won’t go over every line of code. I’m 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’m going to tell you what the data is because I’m weird and special and unique. I’m a special snowflake. So they web component could basically, you know, broadcast when you’re ready to submit, ask me for my data and I’ll 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’s possible I found it a little bit hard to do. There’s also a upcoming spec called Declarative Shadow Route where I encourage you to read more about it. I’m not going to talk about it today. Also, very early. I don’t 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’ll 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’ll learn, learn, learn the spec, right. And I, I didn’t 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’t mind writing compounds myself. So I have not just felt the need to go into a library to make it simpler, I’ll 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’m 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’s it’s 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’m 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’s 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’s 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’s. I’m gonna put that all on me. There’s also some websites, web components. Org, open web components. Also Ben Farrell, fellow Adobe 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’t, that weren’t 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.