Web Components

4 hours, 3 minutes CC
Web Components

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
Close

Course Details

Published: May 17, 2022

Learning Paths

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 3 minutes
  • 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

Section Duration: 34 minutes
  • 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

Section Duration: 1 hour

DOM

Section Duration: 52 minutes
  • 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

Section Duration: 22 minutes

Building a Web Component

Section Duration: 1 hour, 7 minutes
  • 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.

Wrapping Up

Section Duration: 2 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now