Table of Contents
Introduction
Overview
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
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
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
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
Dave demonstrates the <details-utils> 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
Dave introduces Skypack which provides load-optimized NPM packages without needing an installer or any build tools. A <generic-tabs> component which converts semantic HTML into accessible tabs is also demonstrated.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
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
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
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
Dave demonstrates the solution to the Use a Web Component exercise.
DOM
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
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
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
Dave explains new CSS syntax available inside a web component including :host, :host-context(), ::slotted(), and defined.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
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
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
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
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
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
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
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
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
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.