Introduction
  • Introduction
  • Web Components - A Quick Demo
  • What are Web Components
  • Join our Online Learning Community
  • Why Do We Use Web Components?
  • Comparing Web Components & Frameworks
  • Course Outline
  • How To Get The Most Out Of The Course
Refreshing Next Generation JavaScript (Optional)
  • Module Introduction
  • Understanding "let" and "const"
  • Working with Arrow Functions
  • Exports and Imports
  • Understanding Classes
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Refreshing Array Functions
  • Understanding Async Code
  • Next-Gen JavaScript - Summary
  • JS Array Functions
Understanding the Basics
  • Module Introduction - What are Web Components?
  • Browser Support
  • Our Development Setup
  • Creating our First Custom Element
  • Interacting with the Surrounding DOM
  • Understanding the Custom Elements Lifecycle
  • Using "connectedcallback" for DOM Access
  • Listening to Events Inside the Component
  • Using Attributes on Custom Elements
  • "Attributes" vs "Properties"
  • Styling our Elements
  • Using the Shadow DOM
  • Adding an HTML Template
  • Using Slots
  • Defining the Template in JavaScript
  • Using Style Tags in the Shadow DOM
  • Extending Built-In Elements
  • Time to Practice - The Basics
  • Debugging
  • Wrap Up
  • Useful Resources & Links
Diving Deeper Into Web Components
  • Module Introduction
  • Understanding Shadow DOM Projection
  • Styling "slot" Content Outside of the Shadow DOM
  • Styling "slot" Content Inside the Shadow DOM
  • Styling the Host Component
  • Styling Components from Outside
  • Conditional Host Styling
  • Styling with the Host Content in Mind
  • Smart Dynamic Styling with CSS Variables
  • Cleaning Up Our Overall Styling
  • Observing Attribute Changes
  • Adjusting the Component Behaviour Upon Attribute Changes
  • Using "disconnectedcallback"
  • Adding a Render Method
  • Wrap Up
  • Useful Resources & Links
Building More Complex Components
  • Module Introduction
  • Creating the Basics Modal Component
  • Adding the Modal Container
  • Styling the Modal Elements
  • Adding Some General App Logic
  • Opening the Modal via CSS
  • Public Methods & Properties
  • Understanding Named Slots
  • "slotchange" & Getting Access to Slot Content
  • Closing the Modal with Modal Buttons
  • Dispatching Custom Events
  • Configuring Custom Events
  • Adding Enhancements & Modal Animations
  • Wrap Up
  • Useful Resources & Links
Stencil - An Introduction
  • Module Introduction
  • Using Web Components in Modern Browsers
  • Browser Support for Web Components
  • Using Web Components in All Browsers
  • Creating a Stencil Project
  • What is Stencil?
  • Stencil.js behind the Scenes
  • Diving Into a First Stencil Component
  • Wrap Up
Stencil - Diving Into the Basics
  • Module Introduction
  • Using the Development Server
  • MUST READ: Ensuring Correct Imports
  • Creating a New Stencil Web Component
  • Styling a Stencil Component
  • Using Props
  • Important: Reflect Props to Attributes
  • Configuring Props
  • Using Slots & Styling
  • Rendering Conditional Content
  • Using Attributes for Styling only
  • Using Props in Combination with Attributes
  • Understanding Mutable Props