Web Components & Stencil.js - Build Custom HTML Elements

8h 18m 53s
English
Paid

Course description

Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements"). Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.

Read more about the course

Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANY web project, including projects using such frameworks and libraries.

In this course, you'll learn this from scratch.

But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don't know that? No worries, you'll learn it in the course!).

In detail, in this course you will learn:

  • how to build re-usable, lightweight custom HTML elements with native browser features

  • how to build web components of all complexities - from a simple tooltip to modals or side drawers

  • how to pass data into your own web components and use it there

  • how to emit your own custom events which you can listen to in JavaScript

  • how to use the Shadow DOM to scope your CSS styles to your custom elements

  • how to use Stencil.js to get a much easier development workflow

  • how to use the many features Stencil.js provides to build native web components way more efficiently

  • how to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)

Prerequisites:

  • Basic JavaScript knowledge is a must-have

  • ES6 JavaScript knowledge (const, let, classes, ...) is strongly recommended but not strictly required - a brief refresher is provided as part of the course

  • NO JavaScript framework knowledge (e.g. Angular, React, Vue) is required

  • NO TypeScript or JSX knowledge is required

Let's dive into this exciting technology together!

Who this course is for:
  • Everyone who's interested in building custom HTML tags!
  • Students who want to dive into a future-proof web technology that can be used in any web app

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 123 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Web Components & Stencil.js - Build Custom HTML Elements

0:00
/
#1: Introduction

All Course Lessons (123)

#Lesson TitleDurationAccess
1
Introduction Demo
01:39
2
Web Components - A Quick Demo
06:31
3
What are Web Components
03:23
4
Why Do We Use Web Components?
03:06
5
Comparing Web Components & Frameworks
06:16
6
Course Outline
02:47
7
How To Get The Most Out Of The Course
03:05
8
Module Introduction
01:13
9
Understanding "let" and "const"
03:06
10
Working with Arrow Functions
05:28
11
Exports and Imports
04:44
12
Understanding Classes
04:31
13
Classes, Properties and Methods
03:04
14
The Spread & Rest Operator
06:28
15
Refreshing Array Functions
02:33
16
Understanding Async Code
01:05
17
Module Introduction - What are Web Components?
05:08
18
Browser Support
03:06
19
Our Development Setup
04:39
20
Creating our First Custom Element
08:30
21
Interacting with the Surrounding DOM
05:05
22
Understanding the Custom Elements Lifecycle
02:52
23
Using "connectedcallback" for DOM Access
02:06
24
Listening to Events Inside the Component
08:53
25
Using Attributes on Custom Elements
04:46
26
Styling our Elements
04:09
27
Using the Shadow DOM
05:01
28
Adding an HTML Template
05:41
29
Using Slots
01:51
30
Defining the Template in JavaScript
03:30
31
Using Style Tags in the Shadow DOM
02:41
32
Extending Built-In Elements
07:34
33
Wrap Up
02:31
34
Module Introduction
00:52
35
Understanding Shadow DOM Projection
02:27
36
Styling "slot" Content Outside of the Shadow DOM
03:45
37
Styling "slot" Content Inside the Shadow DOM
03:11
38
Styling the Host Component
04:43
39
Conditional Host Styling
02:50
40
Styling with the Host Content in Mind
02:28
41
Smart Dynamic Styling with CSS Variables
06:21
42
Cleaning Up Our Overall Styling
03:23
43
Observing Attribute Changes
06:18
44
Adjusting the Component Behaviour Upon Attribute Changes
02:35
45
Using "disconnectedcallback"
04:41
46
Adding a Render Method
06:14
47
Wrap Up
02:34
48
Module Introduction
00:53
49
Creating the Basics Modal Component
06:34
50
Adding the Modal Container
02:30
51
Styling the Modal Elements
05:36
52
Adding Some General App Logic
03:50
53
Opening the Modal via CSS
05:24
54
Public Methods & Properties
06:38
55
Understanding Named Slots
05:46
56
"slotchange" & Getting Access to Slot Content
05:11
57
Closing the Modal with Modal Buttons
07:02
58
Dispatching Custom Events
03:41
59
Configuring Custom Events
04:53
60
Adding Enhancements & Modal Animations
04:52
61
Wrap Up
01:49
62
Module Introduction
01:22
63
Using Web Components in Modern Browsers
02:36
64
Browser Support for Web Components
02:28
65
Creating a Stencil Project
03:00
66
What is Stencil?
03:10
67
Diving Into a First Stencil Component
06:57
68
Wrap Up
01:42
69
Module Introduction
00:36
70
Using the Development Server
03:20
71
Creating a New Stencil Web Component
08:56
72
Styling a Stencil Component
05:41
73
Using Props
07:03
74
Configuring Props
01:28
75
Using Slots & Styling
04:55
76
Rendering Conditional Content
02:09
77
Using Attributes for Styling only
03:28
78
Using Props in Combination with Attributes
04:18
79
Understanding Mutable Props
05:34
80
Preparing Tabs
03:34
81
Adding More Event Listeners
04:24
82
Using State
04:33
83
Adding Methods to Components
03:41
84
Adding a Backdrop
05:21
85
Wrap Up
01:53
86
Module Introdution
00:39
87
Creating a New Component
02:49
88
Component & API Preparations
03:58
89
Submitting Forms
02:10
90
Styling the Component
05:50
91
HTTP Requests in Components
07:44
92
Using the API Key
02:24
93
Accessing the Host Element
05:15
94
Using References
02:53
95
Two Way Binding & Input Validation
06:33
96
Error Handling
06:08
97
Using the "componentdidload" Lifecycle Hook
05:35
98
All Lifecycle Hooks
05:17
99
Using Update Lifecycle Hooks
04:42
100
Watching Prop Changes
04:48
101
Creating a New Component
05:57
102
Styling the New Component
01:12
103
Outputting a List of Elements
06:21
104
Styling the List Items
02:12
105
Emitting Customs Events
04:48
106
Using the Listen Decorator
06:06
107
Using Hostdata
04:38
108
Adding a Loading Spinner
03:54
109
Embedding Components Into Components
04:55
110
Using CSS Properties
04:33
111
Wrap Up
01:26
112
Module Introduction
00:55
113
Using Stencil Config
05:00
114
Building & Using the Components
04:16
115
Using Web Components in a Node.js Project
02:11
116
Publishing to NPM
03:25
117
Installing NPM Packages
01:28
118
Using Web Components in an Angular App
05:33
119
Using Web Components in a React App
05:19
120
Using Web Components in a Vue App
04:32
121
Polyfills & The Internet Explorer
02:50
122
Wrap Up
01:26
123
Roundup
02:59

Unlock unlimited learning

Get instant access to all 122 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

ES6 for everyone

ES6 for everyone

Sources: wesbos
ES6 for Everyone is a premium training course to strengthen your core JavaScript skills and master all that ES6 has to offer. ES6 is a major update to JavaScrip
7 hours 36 minutes
Asynchronous JavaScript

Asynchronous JavaScript

Sources: udemy
Understanding the asynchronous nature of Javascript is key to mastering the language. This course is designed to take someone with a beginner level knowledge
4 hours 38 minutes 53 seconds
LeetCode & JavaScript Complete Course for Web Developer 2022

LeetCode & JavaScript Complete Course for Web Developer 2022

Sources: udemy
In my LeetCode course, I will walk you through, step-by-step, all the different types of questions that appear during interviews! I am a self-taught programmer
2 hours 53 minutes 26 seconds
Web Scrape Anything With JavaScript

Web Scrape Anything With JavaScript

Sources: interviewespresso (Aaron Jack)
6 Web Scraping Projects. Must-know JavaScript technologies.
6 hours 9 seconds