Web Components

Web Components are used to define custom, reusable HTML elements. They help you break your code into smaller chunks, build design systems, and ship less code while doing it! Learn where to find excellent Web Components to build web apps. You’ll also learn how to create your own custom components using JavaScript and libraries like Lit that will help you make them faster!

• Introduction
• Web Components Overview
• Web Components Adoption
• Web Components and Frameworks Q&A
• Using Web Components Examples
• Enhancing the HTML Details Element
• Skypack, Tabs & Generic Components
• Fun & 3D Components
• Using Web Components Recap
• Finding Web Components
• Use a Web Component Exercise
• Use a Web Component Solution
• Light DOM & Shadow DOM
• Shadow DOM CSS
• Variables, Theme & Parts
• Host & Other Selectors
• Recap & Q&A
• adoptedStyleSheets
• Web Components with JavaScript
• Comparing Web Component JS Libraries
• JS Recap & Q&A
• Basic Counter
• Single Web Component Project
• Web Component Application Project
• Fetching Data
• Web Components FAQ
• Wrapping Up