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! Published: May 17, 2022 Resources and Downloads Course Website & Notes https://htmlwithsuperpowers.netlify.app/ Table of Contents Introduction Introduction 00:00:00 - 00:03:04 Introduction Dave Rupert begins the course by sharing some links to web component resources and community groups. This course is for anyone currently using web components or interested in learning more about web components or component systems. Overview Web Components Overview 00:03:05 - 00:16:28 Web Components Overview Dave introduces a few core web component concepts including templates/slots, custom elements, shadow DOM, and ES(ECMAScript) modules. These techniques leverage web components in different ways and provide multiple points-of-entry to incorporate web components in a website or application. Web Components Adoption 00:16:29 - 00:27:57 Web Components Adoption Dave discusses the increasing popularity of web component and showcases a few applications built on web components including Wordle and the web-based version of Photoshop. Questions about the potential pitfalls of web components and browser compatibility are also addressed in this segment. Web Components and Frameworks Q&A 00:27:58 - 00:37:45 Web Components and Frameworks Q&A Dave explains how web components allow developer to decouple the UI layer from the underlying framework which allows component systems to be leveraged across many applications or properties. Questions about using web components with React and effects on file size are also covered in this segment. Using Components Using Web Components Examples 00:37:46 - 00:50:02 Using Web Components Examples Dave shares some example of web components that enhance functionality without requiring a lot of overhead. These components include the two-up before/after image viewer, a CSV copy/download option for HTML tables, and a podcast player. A benefit of web components is the ability to extend or add existing functionality while still providing a satisfactory fallback solution. Enhancing the HTML Details Element 00:50:03 - 00:53:37 Enhancing the HTML Details Element Dave demonstrates the web component which is a wrapper for the details HTML element to add accessibility features, animations, and force open/close events. Skypack, Tabs & Generic Components 00:53:38 - 01:04:17 Skypack, Tabs & Generic Components Dave introduces Skypack which provides load-optimized NPM packages without needing an installer or any build tools. A component which converts semantic HTML into accessible tabs is also demonstrated. Fun & 3D Components 01:04:18 - 01:10:22 Fun & 3D Components Dave demonstrates a web component library that adds accessibility to older elements like blink and marquee. There are web components for rendering immersive 3D experiences in the browser which provide an easy API for scaffolding a 3D scene. Using Web Components Recap 01:10:23 - 01:16:06 Using Web Components Recap Dave summarizes some key points around using web components and answers audience question about overriding component styles and compression/minification of component libraries. Finding Web Components 01:16:07 - 01:31:04 Finding Web Components Dave provides resources for finding both standalone web components and web component systems. Some useful standalone web components include lite-youtube, pinch-zoom, and pwa-install. Use a Web Component Exercise 01:31:05 - 01:31:55 Use a Web Component Exercise Students are instructed to use a web component. For a list of possible web components, visit the awesome-standalones repository. Use a Web Component Solution 01:31:56 - 01:38:37 Use a Web Component Solution Dave demonstrates the solution to the Use a Web Component exercise. DOM Light DOM & Shadow DOM 01:38:38 - 01:49:23 Light DOM & Shadow DOM Dave explains how CSS styling works between the light DOM and the shadow DOM. Developers are able to apply CSS styling to light DOM elements injected into a web component through a slot. It's not possible to apply CSS styling to shadow DOM elements from outside the web component. Shadow DOM CSS 01:49:24 - 01:56:27 Shadow DOM CSS Dave demonstrates some additional CSS behavior within the Shadow DOM. Custom classes defined outside a web component cannot be used in the web component's shadow DOM unless the CSS file is explicitly imported into the component. Some inheritable CSS styles will cascade into the web component's shadow DOM while others will not. Variables, Theme & Parts 01:56:28 - 02:06:10 Variables, Theme & Parts Dave talks through other shadow DOM styling options. CSS Custom Properties can be used within a web component. Individual elements can be exposed using the parts attribute. Once a part name is applied, the ::part() pseudo element can be used to apply styling. Host & Other Selectors 02:06:11 - 02:13:07 Host & Other Selectors Dave explains new CSS syntax available inside a web component including :host, :host-context(), ::slotted(), and defined. Recap & Q&A 02:13:08 - 02:27:48 Recap & Q&A Dave summarizes some of the strategies for styling web components and answers audience questions about importing styles from external css files. The styling of components based on component properties is also covered in this segment. adoptedStyleSheets 02:27:49 - 02:30:44 adoptedStyleSheets Dave demonstrates how to use native CSS module scripts to import stylesheets directly into a web component and applied using the adoptedStyleSheets API. This allows CSS to be decoupled from the component and shared across an entire component system. JS Libraries Web Components with JavaScript 02:30:45 - 02:39:02 Web Components with JavaScript Dave walks through how a web component is created with JavaScript and compares some of the lifecycle methods to hooks from other frameworks. Since the syntax can be verbose, using a library like Lit can simplify the process and add more intuitive hooks. Comparing Web Component JS Libraries 02:39:03 - 02:45:38 Comparing Web Component JS Libraries Dave compares some popular web component libraries including Lit, Hybrids, Stencil, and Haunted. Popular JavaScript frameworks like Vue, Preact, and Svelte also have APIs for creating web components. JS Recap & Q&A 02:45:39 - 02:53:31 JS Recap & Q&A Dave summarizes the process of creating web components with JavaScript. Questions about lazy loading components, ordering of imports, and explicitly using innerHTML are covered in this segment. Building a Web Component Basic Counter 02:53:32 - 03:08:35 Basic Counter Dave creates a my-counter component that has increment and decrement buttons for changing the value. Component properties can either be exposed as an attribute in HTML or be localized state within the component. Single Web Component Project 03:08:36 - 03:17:48 Single Web Component Project Dave demonstrates how to use the @open-wc command line tool to scaffold a project template for a single web component. The tool asks a series of questions and generates the file structure based on the answers. The structure includes a component source file, VS Code extension recommendations, storybook files and test runners. Web Component Application Project 03:17:49 - 03:28:33 Web Component Application Project Dave scaffolds a web component application using the @open-wc command line tool. The generated project structure is similar to the single component example. An application wrapper is created along with a starting file for the first web component. Fetching Data 03:28:34 - 03:48:24 Fetching Data Dave loads a remote dataset from openbrewerydb.org. The request is sent from the connectedCallback lifecycle callback which fires when the component has been added to the DOM. Visited and unvisited states are added to each brewery along with the ability to toggle the state. Web Components FAQ 03:48:25 - 04:00:49 Web Components FAQ Dave answers some common web component questions including React compatibility, accessibility, IE11 compatibility, reactive contexts, SEO, and server-side rendering. Audience questions about handling focusable elements and the CSS cascade are also covered in this segment. Wrapping Up Wrapping Up 04:00:50 - 04:03:11 Wrapping Up Dave concludes the course by sharing some final thoughts about the future of web components.