Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Web Components & Stencil.js - Build Custom HTML Elements
Introduction
Introduction (1:38)
Web Components - A Quick Demo (6:30)
What are Web Components (3:22)
Join our Online Learning Community
Why Do We Use Web Components? (3:05)
Comparing Web Components & Frameworks (6:15)
Course Outline (2:46)
How To Get The Most Out Of The Course (3:04)
The Academind Pro Referral Program
Refreshing Next Generation JavaScript (Optional)
Module Introduction (1:12)
Understanding "let" and "const" (3:05)
Working with Arrow Functions (5:27)
Exports and Imports (4:43)
Understanding Classes (4:30)
Classes, Properties and Methods (3:03)
The Spread & Rest Operator (6:27)
Refreshing Array Functions (2:32)
JS Array Functions (2:32)
Understanding Async Code (1:04)
Next-Gen JavaScript - Summary
Understanding the Basics
Module Introduction - What are Web Components? (5:07)
Browser Support (3:05)
Our Development Setup (4:38)
Creating our First Custom Element (8:28)
Interacting with the Surrounding DOM (5:04)
Understanding the Custom Elements Lifecycle (2:51)
Using "connectedcallback" for DOM Access (2:05)
Listening to Events Inside the Component (8:52)
Using Attributes on Custom Elements (4:45)
"Attributes" vs "Properties"
Styling our Elements (4:08)
Using the Shadow DOM (5:00)
Adding an HTML Template (5:40)
Using Slots (1:50)
Defining the Template in JavaScript (3:29)
Using Style Tags in the Shadow DOM (2:40)
Extending Built-In Elements (7:33)
Time to Practice: The Basics - Problem (2:55)
Time to Practice: The Basics - Solution (11:31)
Debugging
Wrap Up (2:30)
Useful Resources & Links
Diving Deeper Into Web Components
Module Introduction (0:51)
Understanding Shadow DOM Projection (2:26)
Styling "slot" Content Outside of the Shadow DOM (3:44)
Styling "slot" Content Inside the Shadow DOM (3:10)
Styling the Host Component (4:42)
Styling Components from Outside
Conditional Host Styling (2:49)
Styling with the Host Content in Mind (2:27)
Smart Dynamic Styling with CSS Variables (6:20)
Cleaning Up Our Overall Styling (3:22)
Observing Attribute Changes (6:17)
Adjusting the Component Behaviour Upon Attribute Changes (2:34)
Using "disconnectedcallback" (4:40)
Adding a Render Method (6:13)
Wrap Up (2:33)
Useful Resources & Links
Building More Complex Components
Module Introduction (0:52)
Creating the Basics Modal Component (6:33)
Adding the Modal Container (2:29)
Styling the Modal Elements (5:35)
Adding Some General App Logic (3:49)
Opening the Modal via CSS (5:23)
Public Methods & Properties (6:37)
Understanding Named Slots (5:45)
"slotchange" & Getting Access to Slot Content (5:10)
Closing the Modal with Modal Buttons (7:01)
Dispatching Custom Events (3:40)
Configuring Custom Events (4:52)
Adding Enhancements & Modal Animations (4:50)
Wrap Up (1:48)
Useful Resources & Links
Stencil - An Introduction
Module Introduction (1:21)
Using Web Components in Modern Browsers (2:35)
Browser Support for Web Components (2:27)
Using Web Components in All Browsers
Creating a Stencil Project (2:59)
What is Stencil? (3:09)
Stencil.js behind the Scenes
Diving Into a First Stencil Component (6:56)
Wrap Up (1:41)
Stencil - Diving Into the Basics
Module Introduction (0:35)
Using the Development Server (3:19)
MUST READ: Ensuring Correct Imports
Creating a New Stencil Web Component (8:55)
Styling a Stencil Component (5:40)
Using Props (7:02)
Important: Reflect Props to Attributes
Configuring Props (1:27)
Using Slots & Styling (4:54)
Rendering Conditional Content (2:08)
Using Attributes for Styling only (3:27)
Using Props in Combination with Attributes (4:16)
Understanding Mutable Props (5:33)
Preparing Tabs (3:33)
Adding More Event Listeners (4:23)
Using State (4:32)
Adding Methods to Components (3:40)
Adding a Backdrop (5:20)
Time to Practice: Stencil - Problem (1:13)
Time to Practice: Stencil - Solution (10:04)
Wrap Up (1:52)
Useful Resources & Links
Advanced Stencil
Module Introdution (0:38)
Creating a New Component (2:48)
Component & API Preparations (3:57)
Submitting Forms (2:09)
Styling the Component (5:49)
HTTP Requests in Components (7:43)
Using the API Key (2:23)
Accessing the Host Element (5:14)
Using References (2:52)
Two Way Binding & Input Validation (6:32)
Error Handling (6:07)
Using the "componentdidload" Lifecycle Hook (5:34)
All Lifecycle Hooks (5:16)
Using Update Lifecycle Hooks (4:41)
Watching Prop Changes (4:47)
Creating a New Component (5:56)
Styling the New Component (1:11)
Outputting a List of Elements (6:20)
Styling the List Items (2:11)
Emitting Customs Events (4:47)
Using the Listen Decorator (6:05)
Using Hostdata (4:37)
Adding a Loading Spinner (3:53)
Embedding Components Into Components (4:54)
Using CSS Properties (4:32)
Using Stencil.js to Build Entire Apps
Wrap Up (1:25)
Useful Resources & Links
Deployment & Publishing
Module Introduction (0:54)
Using Stencil Config (4:59)
Building & Using the Components (4:15)
Using Web Components in a Node.js Project (2:10)
Publishing to NPM (3:24)
Installing NPM Packages (1:27)
Using Web Components in an Angular App (5:32)
Using Web Components in a React App (5:18)
Using Web Components in a Vue App (4:31)
Polyfills & The Internet Explorer (2:49)
IE & Polyfills
Wrap Up (1:25)
Useful Resources & Links
Roundup
Roundup (2:58)
Useful Resources & Links
Using Web Components in a Node.js Project
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock