Web Components & Stencil.js – Build Custom HTML Elements

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Web Components – A Quick Demo

Lecture 3: What are Web Components

Lecture 4: Join our Online Learning Community

Lecture 5: Why Do We Use Web Components?

Lecture 6: Comparing Web Components & Frameworks

Lecture 7: Course Outline

Lecture 8: How To Get The Most Out Of The Course

Chapter 2: Refreshing Next Generation JavaScript (Optional)

Lecture 1: Module Introduction

Lecture 2: Understanding "let" and "const"

Lecture 3: Working with Arrow Functions

Lecture 4: Exports and Imports

Lecture 5: Understanding Classes

Lecture 6: Classes, Properties and Methods

Lecture 7: The Spread & Rest Operator

Lecture 8: Refreshing Array Functions

Lecture 9: Understanding Async Code

Lecture 10: Next-Gen JavaScript – Summary

Lecture 11: JS Array Functions

Chapter 3: Understanding the Basics

Lecture 1: Module Introduction – What are Web Components?

Lecture 2: Browser Support

Lecture 3: Our Development Setup

Lecture 4: Creating our First Custom Element

Lecture 5: Interacting with the Surrounding DOM

Lecture 6: Understanding the Custom Elements Lifecycle

Lecture 7: Using "connectedcallback" for DOM Access

Lecture 8: Listening to Events Inside the Component

Lecture 9: Using Attributes on Custom Elements

Lecture 10: "Attributes" vs "Properties"

Lecture 11: Styling our Elements

Lecture 12: Using the Shadow DOM

Lecture 13: Adding an HTML Template

Lecture 14: Using Slots

Lecture 15: Defining the Template in JavaScript

Lecture 16: Using Style Tags in the Shadow DOM

Lecture 17: Extending Built-In Elements

Lecture 18: Debugging

Lecture 19: Wrap Up

Lecture 20: Useful Resources & Links

Chapter 4: Diving Deeper Into Web Components

Lecture 1: Module Introduction

Lecture 2: Understanding Shadow DOM Projection

Lecture 3: Styling "slot" Content Outside of the Shadow DOM

Lecture 4: Styling "slot" Content Inside the Shadow DOM

Lecture 5: Styling the Host Component

Lecture 6: Styling Components from Outside

Lecture 7: Conditional Host Styling

Lecture 8: Styling with the Host Content in Mind

Lecture 9: Smart Dynamic Styling with CSS Variables

Lecture 10: Cleaning Up Our Overall Styling

Lecture 11: Observing Attribute Changes

Lecture 12: Adjusting the Component Behaviour Upon Attribute Changes

Lecture 13: Using "disconnectedcallback"

Lecture 14: Adding a Render Method

Lecture 15: Wrap Up

Lecture 16: Useful Resources & Links

Chapter 5: Building More Complex Components

Lecture 1: Module Introduction

Lecture 2: Creating the Basics Modal Component

Lecture 3: Adding the Modal Container

Lecture 4: Styling the Modal Elements

Lecture 5: Adding Some General App Logic

Lecture 6: Opening the Modal via CSS

Lecture 7: Public Methods & Properties

Lecture 8: Understanding Named Slots

Lecture 9: "slotchange" & Getting Access to Slot Content

Lecture 10: Closing the Modal with Modal Buttons

Lecture 11: Dispatching Custom Events

Lecture 12: Configuring Custom Events

Lecture 13: Adding Enhancements & Modal Animations

Lecture 14: Wrap Up

Lecture 15: Useful Resources & Links

Chapter 6: Stencil – An Introduction

Lecture 1: Module Introduction

Lecture 2: Using Web Components in Modern Browsers

Lecture 3: Browser Support for Web Components

Lecture 4: Using Web Components in All Browsers

Lecture 5: Creating a Stencil Project

Lecture 6: What is Stencil?

Lecture 7: Stencil.js behind the Scenes

Lecture 8: Diving Into a First Stencil Component

Lecture 9: Wrap Up

Chapter 7: Stencil – Diving Into the Basics

Lecture 1: Module Introduction

Lecture 2: Using the Development Server

Lecture 3: MUST READ: Ensuring Correct Imports

Lecture 4: Creating a New Stencil Web Component

Lecture 5: Styling a Stencil Component

Lecture 6: Using Props

Lecture 7: Important: Reflect Props to Attributes

Lecture 8: Configuring Props

Lecture 9: Using Slots & Styling

Lecture 10: Rendering Conditional Content

Lecture 11: Using Attributes for Styling only

Lecture 12: Using Props in Combination with Attributes

Lecture 13: Understanding Mutable Props