Loading Templates

[00:00:00]
>> But the next step is to load the template. We have a template, in fact let's look at the templates now that we know better what we're dealing with. We have a menu page template that looks like the template for the menu page. We have a product-item-template, order-form-template, details-page-template, okay, and cart-item-template.

[00:00:21]
So we have at least details page and menu page. Because we're going to mix things here. So let's start with menu page. And just for see if this works for now, I can add here an H2, this is the menu. It won't look nice in my app, but anyway, just to see something.

[00:00:39]
I can add that to the template. So let's try to load that template first. So I will go where? To Components > MenuPage.js and I will start with the constructor. I will refactor this, okay? So have that in mind. So I'm going to then get the template with the DOM API.

[00:01:01]
So from the document, I'm going to get an element by ID, okay, and the ID is menu-page-template. That's the ID, right? So that's my ID. That's the template. Should I go and inject that template into my DOM? No, because the template is unusable. I have to clone it.

[00:01:23]
I have to create a real instance of the template. So to clone it, typically we call that the content. I don't know why, I don't like the name, but [LAUGH] it's like the best practice. You can say clone element or something like that. We take template.content.cloneNode, and it's asking me if we want a deep clone or not.

[00:01:49]
What is that? If the template has inside other elements and other templates. If we want to clone them all with a deep cloning, typically it's through what we want. And then we can append this child to ourself, the content, right, like so. Again, some of you were maybe thinking, this is too verbose, right?

[00:02:22]
Because yeah, we need to do both, but this is OOP, you can create your own base class. That then your custom components will extend from that will do all the heavy work. Once in the constructor for all the other instances. Okay, does it make sense? So you can improve this with more abstraction layers.

[00:02:45]
So coming back here, so if we load this in the browser, we get an error, why? The error says fail to construct custom element. The result must not have children. He says what's that well that's a rule. When you're constructing an element you cannot return to after the constructor you cannot have children.

[00:03:12]
Okay, so how would you solve the problem one solution is a shadow DOM that we will see later. Because if it's a shadow DOM, you will add elements to the shadow DOM, not to yourself, so it will work. And the other one is to implement the connected callback.

[00:03:30]
How to do that, you just create a method with that specific name. Be careful writing the name, connectedCallback. So, and then we move that, the three lines, to the connected callback. Remember, connected callback is kind of When the component is attached to the DOM so when we put in the DOM.

[00:03:59]
In our case it will be when the router creates the element and appends that to the main HTML element. Make sense? So now, if I'm going back, this is what I see now. I see this is the menu, okay, and what is that? Let's look at the DOM here.

[00:04:26]
We have a menu page that has a string menu, then H2 and a section with a ul. So this is the clone of the template. This menu that is here is the one from the router. The text content that we don't want anymore, but it's still there anyway, okay?

[00:04:42]
So I'm going to remove those text content because now we know how to load the content from a template. Okay, makes sense? And if we apply the same thing on on the other components, okay? We will be ready for seeing at least basic HTML. It's still HTML, but it's static.

[00:05:11]
We're not rendering the data. That's the next step. Wait for it. So basically we could do something similar on the rest, but let's first play with the DOM. You don't need to do this because I will change that. I will delete that, by the way, but let's try to see what happens if i change the color, let's use violet, of the h2.

[00:05:45]
We are in a template so we are expecting this h2 to be applied, which is true. But what happens if we have an h2 also somewhere, like best coffee in town. So this h2 is completed out of the template and out of the web components. It's also viovet.

[00:06:08]
And it's kinda sss, I'm not not expecting that to happen. So to solve that problem, we need shadow DOM, okay, shadow DOM.