Table of Contents
IntroductionDave 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.
Web Components OverviewDave 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 AdoptionDave 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&ADave 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 Web Components ExamplesDave 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 ElementDave 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 ComponentsDave 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 ComponentsDave 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 RecapDave summarizes some key points around using web components and answers audience question about overriding component styles and compression/minification of component libraries.
Finding Web ComponentsDave 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 ExerciseStudents are instructed to use a web component. For a list of possible web components, visit the awesome-standalones repository.
Use a Web Component SolutionDave demonstrates the solution to the Use a Web Component exercise.
Light DOM & Shadow DOMDave 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 CSSDave 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 & PartsDave 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 SelectorsDave explains new CSS syntax available inside a web component including :host, :host-context(), ::slotted(), and defined.
Recap & Q&ADave 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.
adoptedStyleSheetsDave 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.
Building a Web Component
Basic CounterDave 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 ProjectDave 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 ProjectDave 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 DataDave 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 FAQDave 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.