Web Components

• Understand the fundamentals of Web Components and how they can enhance modularity and reusability in web development.
• Learn to create custom HTML elements using JavaScript and popular libraries like Lit, simplifying the development process.
• Gain insights into the use of Shadow DOM, CSS variables, and other advanced styling techniques within Web Components.
• Explore how to integrate Web Components with existing frameworks and understand their benefits in design systems and web applications.
• Develop practical skills by building and deploying your own Web Components, optimizing them for compatibility and performance.

This course offers a comprehensive introduction to Web Components, a powerful tool for creating reusable and encapsulated HTML elements. Led by Dave Rupert, you'll explore key concepts like Shadow DOM, custom elements, and templates. The course covers both the basics and advanced techniques, including the use of JavaScript libraries like Lit to streamline component creation. You’ll also learn to find, use, and style Web Components effectively, making them a valuable addition to your web development toolkit.

• Frontend developers looking to enhance their skills with Web Components.
• Web developers interested in building modular, reusable components.
• Developers working on design systems or large-scale web applications.
• Anyone interested in learning modern approaches to encapsulating and organizing web UI.

• Basic understanding of HTML, CSS, and JavaScript.
• Familiarity with web development concepts and browser APIs.

1. Web Components Overview: Learn the core concepts of Web Components, including custom elements, Shadow DOM, and templates. Discover the growing adoption of Web Components in modern web development.
2. Using Web Components: Explore examples of Web Components in action, enhancing HTML elements and adding functionality with minimal overhead.
3. DOM and Styling: Understand how the Light DOM and Shadow DOM interact with CSS, and learn techniques for styling within the Shadow DOM using variables, themes, and new CSS selectors.
4. Web Components with JavaScript: Create your own Web Components using JavaScript and libraries like Lit. Compare different libraries and their advantages in component development.
5. Building a Web Component: Hands-on experience in building and deploying Web Components, from a basic counter to a full application with data fetching.