Learn about the four main standards that comprise Web Components: templates, HTML imports, Shadow DOM, and custom elements.
- [Narrator] In order to start building web components,…there are some new HTML standards that we first…must learn about.…There are four standards which are part of the…overall web component specifications.…The first is HTML Templates.…The HTML Template tag gives us a way…of taking a bunch of HTML markup…and indicating to the browser that it shouldn't be used…for anything until our code is ready to make use…of the template contents.…This is how we will define the structure…of our web components,…and we'll see how that works shortly.…
The next specification is HTML Imports.…One of the main benefits of web components…is the ability to reuse them over and over again.…HTML Imports provides the important ability…to separate web components into their own files,…so that they can be used in many different applications.…The Custom Elements specification defines how you can build…new tags that work just the same as the tags…that are natively built into the browser.…You can also extend existing tags with…custom functionality if you need to.…
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