Understand what Web Components are and why they simplify web development for complex applications.
Web components help address this complexity in some very important ways. First, they simplify the process of building complex web applications. Apps are built out of components that hide underlying complexity. Second, they promote the principles of reuse. You build a component once, and then, you reuse it in many other places. And third, they provide the important capability of encapsulation. They prevent the Script and CSS of components from affecting each other.
Common page elements like forms, images, paragraph tags and so on, are all web components, they just happen to be natively built into the browser. The new web component standards let you define and build your own new tags, and then easily package them up to be reused either by you or by other developers. You can even extend and enhance the tags that the browser already knows about. One of the best parts of the web components standards though, is that each of these technologies is valuable just on its own.
Even if you don't use all the abilities of web components, you can use each one to dramatically improve how you build your web apps. In the next video, we'll learn about the different standards that make up web components and then, we'll start learning how each one works as we progress through the course to build a complete web component.
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