Take a basic HTML import and structure it so that its content is automatically available within the importing page.
- [Instructor] Now that we've seen how to use imports…to create standalone HTML that can be easily included…into webpages, let's try our hand at building…a basic, reusable module.…One of the downsides of the previous import example…was that we needed to write some boilerplate code…to get the template out of the import document.…And obviously, it would be a big improvement…if the template could just automatically add itself…to the page that is importing it.…And that's what we're going to do in this example.…
So let's open the import2_start file…and let's also open the component file.…So let's start by looking at the component file.…In this example, you can see that…in addition to the template code,…there's also some script included in the file.…The script runs when the import file is loaded.…It automatically adds the template to the importing page.…The first line gets a reference…to the import document itself.…
In other words, this file that contains the template,…it does so by using the document's…currentScript.ownerDocument property,…
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