Web Components & Stencil.js - Build Custom HTML Elements

8h 18m 53s
English
Paid
July 24, 2024

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.

More

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 Web Components & Stencil.js - Build Custom HTML Elements

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Similar courses to Web Components & Stencil.js - Build Custom HTML Elements

SAAS Adventure - Learn to Create your own SAAS

SAAS Adventure - Learn to Create your own SAAS

Duration 8 hours 37 minutes 3 seconds
JavaScript & LeetCode | The Ultimate Interview Bootcamp

JavaScript & LeetCode | The Ultimate Interview Bootcamp

Duration 4 hours 49 minutes 58 seconds
Animating with the JavaScript Web Animations API

Animating with the JavaScript Web Animations API

Duration 1 hour 59 minutes 45 seconds
JavaScript Algorithms and Data Structures Masterclass

JavaScript Algorithms and Data Structures Masterclass

Duration 21 hours 47 minutes 46 seconds
JavaScript: Understanding the Weird Parts

JavaScript: Understanding the Weird Parts

Duration 12 hours 10 minutes 48 seconds
ES6 for everyone

ES6 for everyone

Duration 7 hours 36 minutes
Web Scrape Anything With JavaScript

Web Scrape Anything With JavaScript

Duration 6 hours 9 seconds
Learn HTML Canvas - Pixels, Particles & Physics

Learn HTML Canvas - Pixels, Particles & Physics

Duration 2 hours 15 minutes 38 seconds