Build a fully functioning, complete Web Component using all of the technologies covered in the course.
- [Instructor] Okay, we've now reached the grand finale…where we will used what we've learned throughout the course…to walk through a complete web component.…So, let's open the file named shadowcomp_start,…and this is the example file that will demonstrate…our component, and also open the msgbanner.html file.…This is the file that contains the code…that defines the web component.…So let's walk through the component code…and see how it works.…The first thing in the component file is the template…that defines the component structure and style.…
Essentially, all I did was extract the template…from our previous example using shadowdom into its own file.…So, you scroll down here, you can see, here's the style…definition, here's the host selectors for the various things…that I've styled inside the component, here is the div…that determines the structure of the template,…and then we come to this script block.…Now, this script block contains a self-executing function.…And remember that this script code will be executed…
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