What you'll learn

Too many teams waste time rebuilding UI widgets and keeping styles in sync for every framework at their company. In this course, Web Components Foundations, you'll learn how to make framework-agnostic web components. First, you’ll explore how to make and register a custom element and understand its life cycle methods. Next, you’ll discover shadow DOM for encapsulation and using slots to compose consumer HTML. Then, you'll dive into styling shadow DOM with CSS variables and parts. Finally, you’ll learn to leverage the ElementInternals API to add states and make your custom elements form-associated. When you finish this course, you’ll have the skills and knowledge of web components needed to build reusable framework-agnostic web components to build anything from a single shareable custom button to whole design systems.