Homepage Component

[00:00:00]
>> Maximiliano Firtman: So now we have the template, the next step is to actually write the JavaScript part, because every web component is first a JavaScript class, so I need to create within public always I'm going to create a new folder. Let's call it components, where we're going to write all our components.

[00:00:22]
So we're going to start creating the home page component, homepage js and components are classics, so I'm going to create a class and I'm going to export the class so anyone can use it from the outside, so we can call this homepage. And the important part here is that we are going to extend from HTML element that is what makes it an HTML element but how does the browser know that I want this element to respond to homepage?

[00:01:01]
It It won't get it automatically so to that, we need to call the custom elements API after we set after or before. It doesn't matter the class, and we're going to define a new element, home page, and the class will be home page. Have in mind every time you define a new custom element, it's mandatory to have a hyphen, at least one.

[00:01:28]
It's mandatory from the HTML spec so if you're going to create a custom element, it shouldn't be just one word. You need at least two, so you can use a prefix from your app, like up dash something, or, for example, in this case, home page, okay. And now the next step is, okay, I need to do something when I'm actually rendering this so I wanna get the template and do something with it, okay.

[00:01:59]
So for that but there are two places where I can put some code, one is the constructor, and the other one is the connected callback. Connected callback is a method that we can override from the superclass be careful with the second, capital C the connected callback when that element is actually in a DOM.

[00:02:23]
It's actually pushed into the DOM, it will execute that function, it's like an event, okay, like a mounted event over our element. So and here I can just try to get the template from the DOM, so I will say, get element by ID.
>> Maximiliano Firtman: And I will get the template home, I think that's how I call it, let me check, yep, template_home, and now I am the element, okay, so I am and DOM element.

[00:02:58]
So this is my DOM, I'm an element, okay, so I'm going to do it wrong first, so I can append child to myself the template, this is not gonna work, by the way, right? It's wrong, but let me explain why but first, this is kind of the idea, okay, so we grab the template and then we use it in ourself, okay, the problem is that templates cannot be used directly, because they are templates.

[00:03:29]
They are like classes versus objects, so they are not the instance, they are the class. They are the model to create the instances, so what we need to do with that template is that we need to call widget take its content and call clone node,template,content dot clone node.

[00:03:52]
And we need to specify if db is true, actually, if inside that template there are other web components if we want also to do the whole deep creation of components, okay. For now, we can say true, and this is actually the content that I can push into myself, not the template, okay, does it make.

[00:04:24]
>> Maximiliano Firtman: We need to do this on every component so if you want this is our op. So we can create a base class and then call it and then create sub-classes inheriting from that base class, because it's our op. This is JavaScript, not go we can doop, we had inheritance It, and all that stuff, all that stuff.

[00:04:45]
If I do that now and I refresh, I'm still not seeing that, and it's expectable, you say maybe you were not expecting that you see something. Because let's review what we have, we have an index html, the index html has the home page, and we have already registered that when we have that element we want it to render this element.

[00:05:16]
And this element will take the template and push a clone of that template, an instance of that template into here, so in the homepage. So actually, we should see something like this, this part should be now a clone, should be inside homepage, but it's not working, does anyone know why?

[00:05:34]
You have an imported homepage anywhere. Exactly, the browser has never imported homepage, so it has never executed this line, okay? So, this is important you have to import somewhere somewhere in the in the dependency tree so for example i can go to my app i'm i even i'm not using it from javascript right now just for html but i need to import that now.

[00:05:59]
So I will use this kind of import I will say component homepage JS, if I do that at least the browser will now recognize that components homepage JS has something inside. Okay, another way instead of doing this, and instead of creating the HTML, like this if I can go to app JS I mean, you can do it however you want.

[00:06:32]
I can go to app JS and I can say something like, window, not document, window, add even listener, DOM, content loaded do you all know what that means?
>> Speaker 3: When it reads a page.
>> Maximiliano Firtman: It will be executed when the page was parsed and the DOM is ready.

[00:06:50]
So here, I can go and grab by query selector my main element and I can append a child, and I can say that I wanna create here, when I add here a new what home page. Now it's gonna import that home page the classic way because now I'm doing it from JavaScript, okay, does it make sense?

[00:07:22]
That's another way to do the same thing, but from JavaScript, so when the page loads, I'm creating a new home page. And I'm appending that inside the main so if I wanna see if this is working, I go here refresh, and I can see that is rendering the template that I have just cloned and pushed into this, okay?

[00:07:49]
So that's roughly how a web component works.