Let's talk about Web Components

Let's talk about web components. So I should probably introduce myself first. I'm a self-taught frontend developer and a school taught systems engineer from Lagos, Nigeria. So I'm a long way from home, but I live in London now, so not that long. And you can find me online anywhere at JemimaAbu. So that's LinkedIn, Twitter, Medium. I make my username easy, so you guys don't have to go to stress to stalk me. It's all there.

All right. So let's get into it. Web components, what are they? So I'd like to preface by saying why I wanted to give this talk. I like to build things with HTML and CSS. I'm not a huge fan of JavaScript. When I was first learning React, I didn't understand why things were the way they were. I didn't understand why I had to use set states to change a state property, but then you couldn't just change it as a variable. It didn't make sense to me. So personally I prefer using HTML.

What I don't like about HTML is if I want to create six blocks of the same thing, I have to copy and paste the same thing many times over. And that's what I do like about React. And I was like, is there a way to have the simplicity of HTML with the reusability of React? And the answer was Web Components. So basically Web Components are a suite of technologies that allow you to create reusable HTML elements. So right off the bat, they're already there in your browser. You don't need to do any installation. It's like using vanilla HTML. Is that what it's called? It's like using regular HTML, but with all the fun of React.

And how does it work? So first of all, we have our custom elements. Custom elements are an API that allow you to define new elements and their behavior. So you can create your own HTML tags to use. And then we have the shadow DOM, which sounds very cool and I like it. Which allows you to encapsulate elements, functionality, and styles.

So this is what allows you to remove your custom elements from the regular flow of the page and just have it in a different DOM. Which is fun. And then finally we have HTML templates. So these are the custom tags that you're actually rendering on the pages. Yeah.

So I was going to go through a little bit of code to show what I'm talking about. So this is a simple blog template that we create in regular HTML. So if you're using regular HTML for this, it's just a lot of copying and pasting and changing the content. So let's see some code. Which is the part I'm good at. All right.

So first we're gonna look at what it looks like in regular HTML. Click. So we have this... We have our code up here. And the regular HTML is just a lot of pasting of the div with the same content everywhere. So I'm gonna zoom in. There we go. So you can see you just have the post div and it's just repeated multiple times throughout the page. Because that is what HTML does. It does not give you variety in how you decide to code. And then we have the method I usually use when I'm trying to repeat things. So on my portfolio page, if I was trying to repeat the websites I've built, because I use basic HTML to build my portfolio page, instead of having to write them all at the same time and then just changing the content, I usually just create an array with all the content I need and then I render that on the page using vanilla JavaScript. So if we're going to do that for this... It's a hard scroll bar. If we're going to do that for this thingy, it would look something like this. So I was meant to be live coding, but then I realized that that's just... I am not brave enough to write code live. Sometimes things go wrong and I break down, and I'm not doing that. So if you were doing this with vanilla JavaScript, it would be something like...

You define your post. So this is basically all the HTML that was repeated previously, and we just have it inside a function. And then you just render it on the page. So in this one, I did it with a button that you can click to add new posts and then you can add as many as you like. But then when you render it with a page, it's pretty much just defining document, create elements, and then appending that element to the container that we want our code to be inside. So that's pretty much how this works with vanilla JavaScript.

So this is the basic idea behind Web Components. It's taking your HTML and appending them to your DOM. But then because the idea behind Web Components is being able to have encapsulated and reusable It's like a bit of a mixup. So we'll see how we can get a bit more complicated than this. By going back.

So let's talk about custom elements. Custom elements are the first part of Web Components. And as we have said, they are elements that allow you to define your own HTML tags. So this is what defining the custom elements in JavaScript would look like. You define your custom components as a class and then use the custom elements API to define this new class that you've created. And then you can call it in your HTML using your custom tag. So it's like fairly straightforward. So custom elements allow you to define custom HTML tags. The only syntax is that they have to have a dash in them. So you have your custom elements.define, and the one with the dash is the HTML that you will render on the page. Then you render your custom HTML tag in the DOM. And it also has a life cycle method. So let's take a look at what a custom element would look like if we were putting it in the DOM. Going back... This part I will write a little code. All right, so like we said, when you want to create your custom component, first of all you have to define your class. So I'm just going to create a class and I'm going to call it a post component. And you use the extend keyword. So it's pretty much the same way in React.

You would use the extend React component keyword. In this one we extend the HTML element keyword. Totally forgotting what the syntax is. Yes, that was right. Is there a dot? Is there not a dot? HTML element keyword and then that's pretty much it. Because it's a class component we do have to initialize our constructor. And we just do your constructor and we call your super thing. And that's that.

And then when you're working with... I feel like this is very common for people who use React a lot. I just like to say I'm very glad functional components are a thing. I was not a fan of class components. So once you've initialized your constructor, then with custom elements, you have your own life cycle methods. The same way you have like... UseEffects in React. And custom components, it's called... It's called something callback. Oh. Well, anyway. I can't remember. I'm not going to stress myself. I'm going to put it in here.

So, basically, what we want to do is we want our class to return the... The contents that we had in our page previously that made the post. So, you can just create... We're going to set this the inner HTML. So, this is going to target... Once we initialize the post component, on the page, it's going to target that post component. And set the inner HTML to whatever we're defining inside this template literal. So, let's put a title.

Yep. Give this a class title. I'm just going to call this post title. And h2. We're going to give it some content. Content. I need to put some lorem ipsum in there. Because if you don't put lorem ipsum, how are you even coding? And then we're going to give it a span. Date span.

And finally, we're going to define our custom element here. So it's going to be custom element dot define. We pass in the name of our custom component, which is post component. And then we pass in the class component we just created up there. All right. And then finally, when we want to call that component, we just pass in the actual thingy. All right, I have to close this. Oh, I have an error. That's fun. Let's see. Of course not. That'd be too easy. All right. No, I need to define this. No, I don't. Pause. Fun fact, it's elements, not element. There we go. It worked. All right, coding in public is never fun. But okay.

So basically what we have here is we've managed to render the post title, the content, and the dates how we want it to appear on the page. Now this is how we work with custom elements.

So let's take a look at what happens when we introduce the shadow DOM. This is what it looked like before. And then the shadow DOM. I'm a huge fan of the shadow DOM just because it sounds like a really cool shadow jitsu method. There was the DOM and then there's the shadow DOM. But basically what the shadow DOM is is that it's a separate form of a DOM. It's something that allows you to add documents to your elements to your document tree without affecting the real DOM. You know how in Naruto, the shadow clone is just an extension of themselves? Sorry if I'm going full nerd, but that's how it made sense in my head. The shadow is an extension of yourself, but what happens to the shadow doesn't happen to you. So kind of the same thing with the DOM. When you extend the shadow DOM, what happens in the shadow DOM does not affect the actual DOM. And that's how the shadow DOM works.

So with web components, when we want to call the shadow DOM, we already have our custom component that we've defined, and then inside of that, we call this.attachshadow, and we set the mode to open. Setting the mode to open is what allows us to see the element that we're putting the shadow DOM on. Once you've called your attachshadow DOM, that's what creates a new instance of the shadow root. The shadow root is what we're targeting. So in regular HTML, you have your actual root tag. That's your regular HTML tag. So if you're styling roots in CSS, that means you're styling the HTML tag. With the shadow DOM, the shadow root is the basis of the shadow DOM. I've said shadow DOM so many times it doesn't sound like a real word. I'm moving on.

So how it works, basically, is it works like an iframe. So every new instance of the shadow DOM is separate. Maybe I shouldn't have said that word. Every new instance of the SDOM is separate from the actual page, kind of like how you have an iframe. So an example of a common SDOM elements would be the video elements in HTML. The video tag renders an actual video on the page, but it's not affected by the other elements on the page.

So if you thought about why you need to specifically start ... While videos don't get affected by global styling, it's because they are instantiated in their own shadow DOM element. And we can see the shadow DOM elements in our page by, let's see, maybe YouTube? So basically you can view the regular DOM wouldn't usually show you what shadow elements are, but you can turn it on. Trying to scroll. Anyway, you take my word for it. You can turn on the shadow roots somewhere in this panel. There's a keyboard, there's a little check button like this that allows you to show what shadow elements are. And for video tags that's how they work. They are not part of the DOM itself. They are in their own little iframe thingy. And that's why they don't get affected by global styling of elements. And shadow DOMs allow you set style and markup without affecting the global DOM, so it's the same thing with the videos. Videos have their own styling, but whatever styling is encapsulated in the video does not affect any other styling on the page. It's just trapped in that little video tag. And it allows you to interact with the shadow roots, which just sounds very cool, which is why I put it there. So let's take a look at how the shadow DOM works. This is a link. So here we have our custom elements. So this would be, we can see we have a post component here and this is what a normal post component would look like. But then what we want to do now is create a new instance of the shadow DOM. So let's scroll down a bit. All right. And then we're going to create our new class shadow.

And then we're going to create our new class shadow. I'm going to leave the commented out code there cause I am scared of it's not working again, so I will have something to reference. So we create our shadow elements, we initialize our constructors. We initialize our constructor. And in here, this is where we call this dot attach shadow and mode open. So the mode, the open shadow mode, is what allows you actually interact with the shadow DOM. If it was closed, you wouldn't be able to add any elements to the shadow DOM. That's what people usually use for embeds.

So if you've tried to embed an iframe and you've tried to maybe style it or something and you couldn't, it's usually because the shadow DOM is closed. So by them closing the route, it means you can't interact with that element at all. So that's how this works. And then we can have this dot shadow route. So we need to create an element. Let's just create a const. Let's say shadow div equals to document dot create element div. And we can pass in random HTML to this. Dot inner HTML equals hello react advanced. Yep, and then this dot shadow root dot append child, and let's pass in the shadow div. So this is the class constructor for our shadow components. We still need to define it using custom elements so we can... Are you happy now? There you go. So we can define it using custom elements dot define. And this is going to be shadow comp, and we're going to have the shadow component class. I always forget which cases I use, but this is this one. All right. And then let's see if this works. Shadow component. Okay. Thanks. That's what I get for changing things on the fly.

All right. So there we have it. But then the important thing about this one is when we go to our actual dom, you can see that in the post component, it was just part of the page. So it wasn't really separate from the dom. In the shadow component, it's opened a new shadow root. And you can see that here it says to open, and we have our div passed into here. So there's an example of how you would initialize a shadow component.

But now we have to show how the styles of the shadow components would be encapsulated from the rest of the page. So this is our, I'm going to style this the same way this one is written. All right, I'm just going to copy and paste this. All right. This will work. So something else we can do with custom components is you can also pass attributes to custom components to be rendered as data. So the same way in React, you would initialize a, let's say this was a post-component in React and we just set value to whatever value we wanted rendered. We can do the same thing in custom components using JavaScript.

So up here, we have our connected callback. That's what it's called. Connector? I don't sound right. So here we're basically going to get the attributes. And that's what we set to the component we want rendered. And when we call this component, we're just passing the attributes here. So here we're passing title custom components and data text, hello, React, Advance London. And that's what's rendered on the screen here. So we can do the same thing for our shadow components. Once you call your super. And this dot attach shadow. So we can leave all of these in our constructors and put all of this in our connected callback. The connected callback is pretty much the use effect of web components. Once your page is loaded fully, once the element renders on the page, then whatever is in connected callback is called back. So we have a shadow dev.

Okay, now we have our shadow dot inner HTML. And we need to define all of these. So we're going to have const title equals to this dot get attributes title. And if it doesn't exist, make that null. Same thing with const data text. This is going to be this dot get attribute data text. If it doesn't exist, make it null. And then we're going to set date to be a new instance of whatever date the component is rendered on. Date. I'll call string. Thanks. There we go.

All right, so this is what we have on the screen now. And then once we initialize the values here, title equals to shadow element and data text equals hello react advanced. All right. So we have this set up now, and then I'm just going to switch up the data text so I can have something fun. Data text split reverse. Join. So our shadow text is going to be a mirror of our post here on defined. There we go.

So our shadow text gets to be a mirror of our post, but now if we look in here, we can see that even though we have defined this inside a post class. Osh. So this is in a post class, so technically it should have all the stylings of the post elements that this one up here has. Because we can see that we have styled our post elements. Once I scroll up, we start up with the element here, but the shadow dome does not get any of that styling because the post element was styled in the global dome. And that doesn't trickle down to the shadow dome. So when you create shadow elements, if you want to style them, you also have to define the styling for the shadow elements. in your custom components, which is kind of annoying, but it's also fine. So that's what we're going to do now. We can set an attribute shadow div dot.

Here, we can pass this into this element as well. We can create a style tag here. And this style tag can have, let's see, dot post and order, NPX, solid, right. There we go. So once you have defined your style tag inside the shadow element, it only affects the shadow element. And you can see that it did not affect the styling of the post that was in our global tag either. So that is how encapsulation works. They are both elements that are rendered on the DOM and the user can see both of them. But one is just kept separate from the other because it's the shadow DOM and the other one is the custom element. So that is how the shadow part works.

And then we can go on to HTML templates. So HTML templates are a specific tag that don't show up on the HTML page. And I'll explain what that means. So basically, if we have this template here, this isn't going to show up on an actual page. So let's just take a look at this real quick. I'm just going to cut this out. So here we have defined our templates. So for all intents and purposes, we don't have any JavaScript on this page. But by default, the templates tag does not render on the page. If you open up your DOM, you will see the template tag in the DOM, but it's pretty much just empty. So here we do have the template tag, and we have all the elements that should be inside it, but by default the template tag does not show up on the DOM. It's just set to display none, and it's empty. All the elements are stored inside something called a document fragment. The fragment is basically just a piece of the document object model that is stored in the template tag. Template tags are basically placeholders for contents that you want to render on the page at a later time. So anything you put in a template tag can be called after the page has loaded using JavaScript in your custom components.

I'm going to be honest. I didn't get this. Right? Like, what's the general idea? But I guess the point is just that it's the same way you have the, you have semantic elements that serve a certain purpose, template elements serve the purpose of not rendering on the DOM. And that is just its burden in life.

So let's take a look at some JavaScript using... Yes. All right. So first we define a class web component. This is going to extend... So same thing we've been doing since we're getting our custom components set up. We have our constructor. And we have super. And then we have our connected callback.

So with the template function, when you're calling a template function, you have to target the specific template function. The difference between the template function and what we've been doing so far is that we have been defining all these contents in JavaScript so far. Like we've been calling, we've been creating divs and everything. But now we just have it in the DOM itself and we're going to render it here. And then we put it in the component.

So we have our connected call back and we're going to get const templates. That's going to be close to document.get element by ID. Okay. I'm good. ID, what was the name of this? HTML template. Yes. HTML template. Another thing with the template tag is that it doesn't work the same way regular elements work. So with regular elements, if I wanted to get their content, I would just use inner HTML. As we've seen from the thing here, components do not ‑‑ templates do not have inner HTML. What they have is a fragment, which can't be targeted just using inner HTML. So how we get the content in a HTML tag is by using template content.

So we target the template and we target the content and then we create a node from this content. So basically what's happening here is we can make that deep. So let's take a look at each of these things individually. I'm going to throw everything into JavaScript because that's how I work. content. And we're going to define this custom component. Define webcomponent. Webcomponent. So arguments required by only one present. That's not right. Hmm. What? Yeah, that's the thing with demos. It will take 10 minutes. And it's been 30 minutes. And you're, like, what? All right, let's wrap this up. I feel like you have to take my word for the rest of the HTML templates. But also I do have all of the code already set up on my code engine, because I'm the kind of student that did the assignments before the teacher assigned it. So, if you want to take a look at it, I have the links to those in my slides. I'm going to run through the rest of it. I'm going to get to the actual React parts. So, yeah, HTML templates, blah, blah, blah, this, that, that. Y Web components are awesome. They allow you to use reusable HTML elements. Love that. But also they do not require any installation, so you don't need to set up a build process or anything, you can just use them out the bat. My favorite part, they are cross-framework compatible meaning that you can use your web components you can define one web component use it in React, Angular, Vue, any framework, and it will work. React versus Web Components which should you be using? The React docs puts it best when it says React and Web Components are built to solve different problems. So, it's not a versus, it's not a this or that situation, it's a this and that situation. We're looking at how best we can combine Web Components with React and get it to work. So, both. Both is good. So, there is a website it's called Custom Elements Everywhere and it shows you how elements how custom components work with each framework. So, you can see that for Angular it has a score of 100%, integrates perfectly with Angular. For Vue, it has a score of 100%, integrates perfectly with Vue. For React? Could be better. Basically the problem with that is because React does not allow instant it does not allow you to interact with the DOM the way web components do. So if you are trying to pass a web component let's say we define a button in a web component and we have an onclick event that is not going to work the same way that things work in React. Because React is React.