Join Joe Marini for an in-depth discussion in this video What you should know, part of Learning Web Components.
You should also be familiar with using a code editor such as Sublime Text or Visual Studio Code, or Adobe Brackets. Since we're going to be working with plain text files in this course, it doesn't really matter which code editor you use. To build the examples in this course I'm going to be using Adobe Brackets, which is a free code editor that runs on Mac, Windows and Linux. One of the reasons I like to use Brackets is that it has a built=in development web server which is useful for debugging. There's a course you can watch to familiarize yourself with Brackets, called Adobe Edge Code and Brackets: First Look with Ray Villalobos.
Now, again, you can use whatever code editor you like, but I'll be using Brackets in this course. If you'd like to use it as well, you can downloaded it from brackets.io. You should also be familiar with using browser-based debugging tools, in case you want to debug or step through the code in this course as we work on it. Once you're comfortable with working in these tools and technologies, you're ready to continue with the course.
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