Creating Web Components

[00:00:00]
>> Okay, let's create our first Web components. We are now here in chapter 4, so we're going to create the custom elements, we're going to start with a basic one before reactive programming. So we're going to start creating these files. And for this, I'm not sure if you realize that we do have a components folder with CSS already waiting for us, okay?

[00:00:29]
And with some names. So the idea is that we're going to create the JavaScript counterpart of these CSS files, and they're going to be Web components, okay? So we're going to start with menu, menu page. So I'm going to start, create, MenuPage.js. MenuPage.js then, we'll need first a class.

[00:00:54]
So we need to create the class with the name MenuPage, extending from HTML element, okay? As I mentioned before, typically, the next step is to create a constructor, and please, please, always call super, you will have problems with some elements if you don't do that. And finally, we are going to talk with the custom elements API, and we're going to define a new HTML element with a name, for example menu-page, apply to that class.

[00:01:37]
Is this with shadow DOM? Not yet, so by default, we don't have Shadow DOM.
>> How do Web components affect SEO?
>> Okay, so the question, how do Web components affects SEO? It depends, so this question is within the question of what happens with single page applications and SEO, and client side applications with SEO.

[00:02:05]
But let's say that based on how you're rendering this, it may not affect a lot, or in fact, it affect less than using React. Why? Because, for example, your template is here in the HTML anyway, if you use this technique, okay? So, I would argue that it's not affecting in any special way compared with not using the Web components.

[00:02:35]
So it's the same as any single page application, that today, let's say that search indexes are smart enough to work without any issue. Unless you are taking 30 seconds to render your UI. Typically, it works, so it's not affecting negatively. Okay, so now we have menu page. Does it mean that we can now use menu page somewhere?

[00:03:08]
Yes? No? What do you think? What happens if I have here, a menu-page? Will it work? I mean, what happens? How the browser knows that I have that JavaScript file there? So I'm in the browser, and if I'm going to header I do have a menu page, but this is actually rendering my Web component?

[00:03:27]
The answer is no. When the browser finds an unknown element, it just ignores the element. By the way, it goes to the DOM as an unknown element, but it's not yet my element. So why? Because there is no link between this HTML and the menu page, JS. Where can I do the link?

[00:03:52]
For example here, in my app.js, I can link my Web components. How? Just importing them. By the way, for that, I need to export them. So I can export my MenuPage, so then someone else can use it. And then I'm going to import. MenuPage from components MenuPage. And this is weird, because we are not going to use it from JavaScript yet, but just by importing the file.

[00:04:27]
Now, the browser will load that file, and it will execute that module, and when it will execute that module, it will execute the define. And now the browser will know that we are defining a new Web component, with the naming MenuPage, does it make sense? So you need to import there somewhere in the chain, in the import chain, because if not, it's not gonna work.

[00:04:53]
We will see a difference. Well, not completely, because it's still empty right now, okay? So nothing happens there. But now it's linked, so now it's ready for usage. But anyway, we're not going to use it like this. We're going to use it from the router. Instead of creating an h1 like now, I'm going to render that, okay?

[00:05:17]
But we need to load the template. Let's go step by step. So, that's the menu page, and I'm going to just clone them as details page and order page, and then change the contents. Order page, order page, and also please change this, because you cannot redefine the same tag name.

[00:05:43]
DetailsPage, details-page. So those are my three pages, okay? And then here, I'd need DetailsPage. And what else do we need to do? We need to import all the components in app.js So I'm going to add import for DetailsPage, and they're going to import OrderPage. That means that the browser will download those JavaScript files, will parse those JavaScript files and it will know that there are new components available.

[00:06:27]
>> Is this getting into how you would create your own component library?
>> I'm creating components. I'm not sure what you mean by library, but yeah, we are creating a set of three components. And a Web component is also the mix of custom elements. So far, we have just created the custom elements, nothing else.

[00:06:48]
But the mix of custom elements, template, using the template string, and actually clone the template and use it. And shadow DOM, the 3 in action is what we know as a Web component. And it's kind of a way to create your own component library. Okay, so the next step, well, we can pick the next step, but let's say that in the router, if we go to the Router.js, right now we are creating h1s.

[00:07:16]
And we may wanna change that. So instead of h1, I can now create elements of my custom elements, such as the menu-page here, the order-page, and the details-page. And by the way, what happens if I leave the text content there? Will it work? Yeah, because it's an HTML element, it can contain text inside.

[00:07:42]
I am not sure I wanna render that, okay? At the end, because I have a template for that, but it should do something, but now it's not an h1. So, if now, you can see, it says a different style, because it's not an h1, okay? But it works.

[00:08:01]
So now we have a menu page, and that menu page has a text inside. Okay? So we are creating our own elements.