HTML Templates

[00:00:00]
>> The other important part is the template element. The template element is a fragment of markup that can be cloned and inserted into the document at runtime with the reusable HTML content that can be rendered and modified dynamically. I'm not sure if you understood from there. But quickly, I'm not sure if you remember that we have the template elements here.

[00:00:27]
These are template elements. What's the template element, a tag that the browser ignores completely. It's in the DOM but it ignores what's inside. It says, I'm not gonna touch it, I'm not going to render it. It's a template for a JavaScript code that wants it. Before the template, we were using some hacks.

[00:00:53]
I'm not sure if we have seen these before, like script with a type wherever, with a language wherever. Not sure if you have seen this. So because the browser was saying hey I don't know that the scripting language the browser was ignoring that, okay? And then using the DOM API we were getting the content and then using JSON.parse, or Stringify, or wherever,okay.

[00:01:20]
Well, we don't need to use those hacks anymore, we use template. And then with the DOM API, we get the contents of that template, we clone them, we create clones of them, that's it. Template and we are creating instances of that template that we checked in a real DOM.

[00:01:38]
Okay makes sense. So it's a way that we have to define the HTML of a web component in the HTML file. Okay so similar to what Angular things what a template is okay the thing here is that it goes in the DOM. So now I'm going back to one of the questions that we had earlier about the fragment document.

[00:02:03]
So a document fragment in the DOM, it's something similar to what template is, is to create a DOM in memory that is not a real DOM. It's like a virtual DOM, so you can play with that, but it's not actually affecting the real DOM. And in that sort of things is similar to what template is doing.

[00:02:25]
So the template is pretty simple. We have already seen that. Typically, we set an ID it's not mandatory, but because we will need to access it later to clone it, we get it. And to clone it, typically, we do that in the connected callback method of the custom element.

[00:02:42]
We get the template with getElementById or quelySelectors or somehow, we call content.cloneNode and then we append the content the clone not the template. Because the template is like read-only and parsed. Okay, so we clone it and then we use it, that's how it works.

[00:03:07]
By default, the nodes of our custom elements are part of the same page DOM. So for example, CSS style declarations applies to all the documents. What? Let me show you something. Let's say that we grade the template, and the template has an e style declaration setting all the H1 as reds, because it has an H1.

[00:03:34]
But by default, this style declaration goes to the whole document, so outside of the template, and it's going to change all the H1s in the page, not just the H1 of this template,