Learn how to take a template tag and and use it within a web page.
- [Instructor] Now that we have our template element defined within our document we can write some script code to make use of it. There's a few steps involved with activating a template. First you retrieve a reference to the template, such as using an ID. To then import the template's content into the document you use a DOM function, such as importNode, on the template's content property. This makes a copy of the template content that you can operate on, such as changing some data.
When you're ready to add the new content to the document you can add the node using whatever DOM function you want. In this example here the new content is added to the body of the web page using the appendChild DOM function. So let's put these steps to work in our real code example. Alright, so first let's scroll down to the script area and you can see that I have an EventListener for when the button is clicked. So first we have to get a reference to the template and make a copy of its content.
So I'll write var tmpl = document.getElementById, and remember, I gave it the ID of tmpl, and then I'll have another variable called newNode, and that's going to be document.importNode, and I'm going to import the tmpl's content, and I'm going to pass in the true value as the second parameter to importNode.
That basically says make a deep copy of whatever this node is. So don't just copy this node, copy this node and all of its children, which I want to do, because remember, the template has a whole bunch of content in it, so I want to make a deep copy. Alright, so once the template content has been imported into the page I can then modify the contents of the template. So to do that I'll write newNode.querySelector, and I'm going to get the span element that's inside the template.
And what I'm going to do is write textContent = and then I'll say count++, an oh, before I do that I should point out that I have a variable up here labeled count. So all we're going to be doing is inserting an incrementing variable into that little span, which up here, you can see it's right here. So each time we make a copy of the template our text will read This is a new paragraph item, and then it'll be one, two, three, and so on.
Okay, so once the content is set the way I want it I can add it to the page as I normally would with any other DOM function. In this case I'm going to add it into this example div area right here. So what I'm going to write then is document.getElementById, and that's my example div, and I'll say appendChild, and that's going to be the newNode.
So let's save that. Now let's hop over to the browser and refresh the page and run the code. Alright, so let's go ahead and refresh. And you can see that there's nothing in the Console. So I'll click the button and you can see that as I click it new instances of the template are being added to the page. And so if we bring up the developer tools here, I'll refresh the page one more time, now I'm going to set a break point in the click handler, which is right here, and I'll also move this to the bottom, so we can see it a little bit better.
Okay, so now I have my break point. And what I'm going to do is click on the button. Okay, so you can see that when I click the button the code gets a reference to the template and I'll step and we see that the template content is now being imported, but if we click on the Console there's still nothing there. So I will step again. And now we're going to modify the content, so we're going to put the increasing variable into the span, and then back in the Console, still nothing.
Now we're going to add the content into the page, so I'll step, and you can see that the paragraph was added, and if I go back to the Console you can see that the script tag that was in my template has finally been executed, that console.log statement is being run. And remember, that's because the script content of the template is not executed until the template content actually becomes a part of the web page.
Joe Marini starts the course by going into HTML templates, which provide a browser-native way to declare sections of HTML markup that will be used frequently in your app. Next, he covers HTML imports, explaining how to use them and create reusable modules. Then, he takes you through working with custom elements. To wrap up the course, he discusses Shadow DOM and how to create Shadow DOM to define custom element structure and rendering within a page.
- Web standards
- Customizing web components
- Activating and using templates
- Using HTML imports
- Creating reusable modules
- Defining custom elements
- Customizing elements and styles
- Creating Shadow DOM
- Styling and Shadow DOM