CF

Web Components & Stencil.js - Build Custom HTML Elements

8h 18m 53s
English
Paid

Web Components & Stencil.js - Build Custom HTML Elements is a 123-lesson 8 hours 18 minutes self-paced course by Udemy. Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general.

Course facts

Lessons
123
Duration
8 hours 18 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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

Who teaches Web Components & Stencil.js - Build Custom HTML Elements? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Web Components & Stencil.js - Build Custom HTML Elements?

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

What courses are similar to Web Components & Stencil.js - Build Custom HTML Elements?

More courses by Udemy

Frequently asked questions

What are the prerequisites for this course?
The course requires a basic understanding of JavaScript, as it covers topics like 'let' and 'const', arrow functions, and classes. Familiarity with modern JavaScript features such as the spread and rest operators, and async code is beneficial. No prior knowledge of frameworks like Angular or libraries like React is necessary since the course focuses on native JavaScript features.
What projects or components will I build in this course?
Throughout the course, students will create custom HTML elements using Web Components. Projects include building components with shadow DOM, creating a modal component, and understanding how to interact with the DOM and manage component lifecycle events. These elements are designed to be powerful and reusable across different projects.
Who is the target audience for this course?
This course is ideal for developers interested in learning how to build web components without relying on frameworks or libraries. Individuals seeking to enhance their JavaScript skills and those who want to create reusable HTML elements will find the course particularly beneficial.
How does the depth of this course compare to other similar courses?
The course offers an extensive exploration of Web Components, covering 123 lessons. It includes detailed modules on browser support, custom elements lifecycle, shadow DOM, and component styling. This makes it comprehensive compared to courses that only provide an overview of these topics.
What specific tools and platforms will be used in the course?
The course utilizes native JavaScript features to build Web Components, focusing on browser-baked specifications. Lessons cover working with shadow DOM, custom events, and template creation in JavaScript without relying on external frameworks or libraries.
What topics are explicitly not covered in this course?
The course does not cover popular JavaScript frameworks and libraries like Angular or React. It also does not delve into advanced JavaScript topics outside the scope of Web Components, such as server-side scripting or database management.
What is the estimated time commitment for completing this course?
The course consists of 123 lessons. While the total runtime is not specified, students should allocate time for both video lessons and practical exercises, which could vary based on individual learning pace. A commitment of several weeks, dedicating a few hours per week, is advisable for thorough understanding and practice.