CourseFlix

Web Components & Stencil.js - Build Custom HTML Elements

8h 18m 53s
English
Paid

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.

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

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 123 lessons

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
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

Related courses

  • Advanced JavaScript thumbnail

    Advanced JavaScript

    Sources: ui.dev (ex. Tyler McGinnis)
    I'm not good at writing sales copy, just trust me that if you use JavaScript in any capacity, there's probably not another resource that will benefit you more than this. This…
    3 hours 5 minutes 51 seconds 3 / 5
  • Testing JavaScript with Kent C. Dodds thumbnail

    Testing JavaScript with Kent C. Dodds

    Sources: Kent C. Dodds
    This course will apply the four-layer testing method to a React application, but this foundational strategy can be applied across any JavaScript framework: Angu
    14 hours 11 minutes 26 seconds
  • Generating Fake Data with Faker.js thumbnail

    Generating Fake Data with Faker.js

    Sources: vueschool.io
    Every user application depends on data, whether it's user profiles, product listings, or blog posts. However, creating realistic datasets...
    51 minutes 56 seconds
  • Object-oriented Programming in JavaScript thumbnail

    Object-oriented Programming in JavaScript

    Sources: codewithmosh (Mosh Hamedani), udemy
    Object-oriented programming (OOP) is a popular programming paradigm or style of programming. It’s been around since ‘70s, but unlike tools and frameworks that c
    3 hours 53 minutes 46 seconds 5 / 5
  • Scalable TDD & Testing thumbnail

    Scalable TDD & Testing

    Sources: Logic Room
    Enhance your JavaScript UI testing skills with scalable methods independent of frameworks. Boost development speed, improve code quality, and increase
    2 hours 56 minutes 56 seconds
  • Explore the JavaScript Universe (Explore the JavaScript Universe) thumbnail

    Explore the JavaScript Universe (Explore the JavaScript Universe)

    Sources: Dan Abramov
    On a good day, programming feels like magic. You patiently enchant the machine with a tapestry of digital spells. With a few confident keystrokes, you breathe l