Build an HTML import and see how to use it within a web page.
- [Instructor] Let's modify our original template example…from the first chapter to use HTML Imports…to store the template content in a separate file…that we can use in more than one page.…Let's open the file import1_start.html,…and let's also open the file template.html.…The template file contains the template code,…well, most of it, anyway, from the previous chapter.…I've placed it into its own file for this example.…So back in the main page, we need to start…by writing the import statement to import the template.…
And you can see that I've already included the polyfill…right here about any imports that I want to use.…Now, for polyfilling reasons,…this has to proceed any imports you want to use.…And in browsers such as Chrome that natively support…HTML Imports, this actually won't be used at all.…So let's go ahead and add our link.…So I'll type link rel="import,"…and we get a reference to our template, which is right here,…and we'll give this an ID,…and we'll call it tmplFile.…
Now, remember, this just simply makes the imported…
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