Web Components are set to change how you build front-end web applications. This course teaches you how to use the Web Components specifications to create encapsulated and reusable UI components which can be used with almost any framework or library.
Web Components represent a new way to develop reusable UI components that solve fundamental problems web developers face every day. In this course, A Practical Guide to Vanilla Web Components, you'll learn all about the Web Component specifications. First, you'll get an overview of the fundamentals of web components. Next, you'll explore the basic anatomy of a web component. Finally, you'll be shown how to use what you've learned so far by building two high quality vanilla Web Components. By the end of the course, you'll be able to write top quality encapsulated UI components which can be used in almost any front-end technology stack.
The Basic Anatomy of a Web Component Hi and welcome to the Basic Anatomy of a Web Component module in A Practical Guide To Vanilla Book component. In the Web Component Fundamentals module I walked you through all of the work component specifications to give you a solid understanding of how these individual technologies work. In this module, we'll bring all of them together to show you how to build the basic structure of a web component. More specifically, in this module you'll learn the two different methods for writing a component and why you would choose one method over the other. I'll introduce you to some best practices for creating custom elements for your components. Dome element and tributes are a large part of the work component ecosystem, so we will look at how best to handle them. We'll look at how to define and use properties of a work component and finally, I'll show you how to use the Shadow Dom with your components. Before you start writing web components, you'll first need to decide how you want to write them. There are currently two common methods, each of which have their own advantages or disadvantages which is what we're going to cover now.