Paravel
Web Components
4 hours, 3 minutes
CC
Course Description
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!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: May 17, 2022
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 3 minutes
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
Section Duration: 34 minutes
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.
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.
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
Section Duration: 1 hour
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.
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.
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.
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.
Dave summarizes some key points around using web components and answers audience question about overriding component styles and compression/minification of component libraries.
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.
Students are instructed to use a web component. For a list of possible web components, visit the awesome-standalones repository.
Dave demonstrates the solution to the Use a Web Component exercise.
DOM
Section Duration: 52 minutes
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.
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.
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.
Dave explains new CSS syntax available inside a web component including :host, :host-context(), ::slotted(), and defined.
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.
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
Section Duration: 22 minutes
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.
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.
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
Section Duration: 1 hour, 7 minutes
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.
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.
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.
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.
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
Section Duration: 2 minutes
Dave concludes the course by sharing some final thoughts about the future of web components.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops