Learn how to use web components to simplify the often highly complex task of developing and maintaining web applications. Discover how to customize HTML templates, HTML imports, built-in elements, and Shadow DOM.
- [Joe] Hi, I'm Joe Marini and welcome to this course on building and using web components. Creating applications for the web has certainly come a long way just in the last several years. It's possible now to do things in a web app that used to require building apps with native code. One of the areas where the web has always seemed to lag behind, however, has been in creating packaged, reusable building blocks for app development. There have been some very popular open source libraries that helped solve this problem, such as jQuery, Ember, or React.
Then we'll learn about HTML imports, which make it easy to separate individual parts of your code into reusable pieces. These pieces can then be integrated into your apps just by including them with a simple import statement. After that we'll move onto custom elements, which give you the core ability to teach the browser about entirely new HTML tags. And finally we'll see how to use a technology about Shadow DOM, which is how you give your custom components their own set of behaviors and appearance, and how you make sure that these properties are isolated from other components when they're used together in the same webpage.
Then we'll put all these technologies together to build a finished, reusable web component. In addition to being used for web components, each of these individual standards such as templates or imports can be used by themselves, so even if you just want to ease your way into creating components, you can benefit from them right away. If you're ready to dramatically simplify the way you create web applications, then let's get started learning about web components.
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