See how to create a template and provide a default content structure for it.
Now remember that templates are inert…until they are activated.…So in this case,…the image won't actually be fetched by the browser…until the template is instantiated…and inserted into the document.…Similarly, the script code won't be executed by the browser…when the template is first parsed.…Okay, let's see how this looks in real code…and switch over to our editor.…I'm here in Adobe Brackets…and I have opened the exercise files folder in my editor…and if you're using Brackets you can do that…by clicking on the open folder button right here…
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