Development
Web Development
Web Components
Web Components & Stencil.js - Build Custom HTML Elements
4.6 (1,301 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,400 students enrolled

Web Components & Stencil.js - Build Custom HTML Elements

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Bestseller
4.6 (1,301 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,400 students enrolled
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller
Last updated 11/2019
English
English
Preview this course
Web Components & Stencil.js - Build Custom HTML Elements
Current price: $80.99 Original price: $124.99 Discount: 35% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 20 articles
  • 90 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build your own re-usable HTML elements that you can use in your own projects or share with other developers
  • Overcome the limitations of the built-in HTML elements with the power of HTML, CSS and JavaScript only
Course content
Expand all 143 lectures 08:50:35
+ – Introduction
8 lectures 27:01

Welcome to the course! Let me introduce myself and give you a rough overview of this course, in this lecture.

Introduction
Preview 01:38

What are "Web Components"? You understand them best, if you see them in action - so time for a quick web components + custom HTML elements demo.

Web Components - A Quick Demo
Preview 06:30

We saw web components in action - what exactly are web components then? How did that demo work? Let's dive into the important theory in this lecture.

What are Web Components
Preview 03:22

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

Join our Online Learning Community
00:21

We know what Web Components and Custom HTML Elements are - why would we use them? In this lecture, I'll give you some ideas!

Why Do We Use Web Components?
Preview 03:05

Do web components replace Angular, React.js or Vue.js? Are custom HTML elements better than JavaScript frameworks? Let's explore that question in this lecture!

Comparing Web Components & Frameworks
Preview 06:15

We got the theory out of the way - time to now understand what's in this course. Here's an overview of the course content and the order in which it is presented.

Course Outline
Preview 02:46

It's important to me to ensure that you're getting the most out of this course! So here are some tipps & tricks regarding how you should use the course content.

How To Get The Most Out Of The Course
Preview 03:04
+ – Refreshing Next Generation JavaScript (Optional)
11 lectures 35:55
Module Introduction
01:12
Understanding "let" and "const"
03:05
Working with Arrow Functions
05:27
Exports and Imports
04:43
Understanding Classes
04:30
Classes, Properties and Methods
03:03
The Spread & Rest Operator
06:27
Refreshing Array Functions
02:32
Understanding Async Code
01:04

Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.

Next-Gen JavaScript - Summary
03:38

Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

JS Array Functions
00:14
+ – Understanding the Basics
20 lectures 01:19:04
Module Introduction - What are Web Components?
05:07
Browser Support
03:05
Our Development Setup
04:38
Creating our First Custom Element
08:29
Interacting with the Surrounding DOM
05:04
Understanding the Custom Elements Lifecycle
02:51
Using "connectedcallback" for DOM Access
02:05
Listening to Events Inside the Component
08:52
Using Attributes on Custom Elements
04:45
"Attributes" vs "Properties"
01:00
Styling our Elements
04:08
Using the Shadow DOM
05:00
Adding an HTML Template
05:40
Using Slots
01:50
Defining the Template in JavaScript
03:29
Using Style Tags in the Shadow DOM
02:40
Extending Built-In Elements
07:33
We already did our first steps in the world of web components - time to practice what we learned so far in this assignment!
Time to Practice - The Basics
1 question
Debugging
00:14
Wrap Up
02:30
Useful Resources & Links
00:04
+ – Diving Deeper Into Web Components
16 lectures 52:30
Module Introduction
00:51
Understanding Shadow DOM Projection
02:26
Styling "slot" Content Outside of the Shadow DOM
03:44
Styling "slot" Content Inside the Shadow DOM
03:10
Styling the Host Component
04:42
Styling Components from Outside
00:16
Conditional Host Styling
02:49
Styling with the Host Content in Mind
02:27
Smart Dynamic Styling with CSS Variables
06:20
Cleaning Up Our Overall Styling
03:22
Observing Attribute Changes
06:17
Adjusting the Component Behaviour Upon Attribute Changes
02:34
Using "disconnectedcallback"
04:40
Adding a Render Method
06:13
Wrap Up
02:33
Useful Resources & Links
00:06
+ – Building More Complex Components
15 lectures 01:04:26
Module Introduction
00:52
Creating the Basics Modal Component
06:33
Adding the Modal Container
02:29
Styling the Modal Elements
05:35
Adding Some General App Logic
03:49
Opening the Modal via CSS
05:23
Public Methods & Properties
06:37
Understanding Named Slots
05:45
"slotchange" & Getting Access to Slot Content
05:10
Closing the Modal with Modal Buttons
07:01
Dispatching Custom Events
03:40
Configuring Custom Events
04:52
Adding Enhancements & Modal Animations
04:51
Wrap Up
01:48
Useful Resources & Links
00:01
+ – Stencil - An Introduction
9 lectures 21:39
Module Introduction
01:21
Using Web Components in Modern Browsers
02:35
Browser Support for Web Components
02:27
Using Web Components in All Browsers
00:11
Creating a Stencil Project
02:59
What is Stencil?
03:09
Stencil.js behind the Scenes
00:20
Diving Into a First Stencil Component
06:56
Wrap Up
01:41
+ – Stencil - Diving Into the Basics
20 lectures 01:10:56
Module Introduction
00:35
Using the Development Server
03:19
MUST READ: Ensuring Correct Imports
00:07
Creating a New Stencil Web Component
08:55
Styling a Stencil Component
05:40
Using Props
07:02
Important: Reflect Props to Attributes
00:09
Configuring Props
01:27
Using Slots & Styling
04:54
Rendering Conditional Content
02:08
Using Attributes for Styling only
03:27
Using Props in Combination with Attributes
04:16
Understanding Mutable Props
05:33
Preparing Tabs
03:33
Adding More Event Listeners
04:23
Using State
04:32
Adding Methods to Components
03:40
Adding a Backdrop
05:20
We learned a lot about Stencil already, so let's apply this new knowledge in an assignment now!
Time to Practice - Stencil
1 question
Wrap Up
01:52
Useful Resources & Links
00:03
+ – Advanced Stencil
28 lectures 01:52:46
Module Introdution
00:38
Creating a New Component
02:48
Component & API Preparations
03:57
Submitting Forms
02:09
Styling the Component
05:49
HTTP Requests in Components
07:43
Using the API Key
02:23
Accessing the Host Element
05:14
Using References
02:52
Two Way Binding & Input Validation
06:32
Error Handling
06:07
Using the "componentdidload" Lifecycle Hook
05:34
All Lifecycle Hooks
05:16
Using Update Lifecycle Hooks
04:41
Watching Prop Changes
04:47
Creating a New Component
05:56
Styling the New Component
01:11
Outputting a List of Elements
06:20
Styling the List Items
02:11
Emitting Customs Events
04:47
Using the Listen Decorator
06:05
Using Hostdata
04:37
Adding a Loading Spinner
03:53
Embedding Components Into Components
04:54
Using CSS Properties
04:32
Using Stencil.js to Build Entire Apps
00:22
Wrap Up
01:25
Useful Resources & Links
00:03
+ – Deployment & Publishing
13 lectures 37:04
Module Introduction
00:54
Using Stencil Config
04:59
Building & Using the Components
04:15
Using Web Components in a Node.js Project
02:10
Publishing to NPM
03:24
Installing NPM Packages
01:27
Using Web Components in an Angular App
05:32
Using Web Components in a React App
05:18
Using Web Components in a Vue App
04:31
Polyfills & The Internet Explorer
02:49
IE & Polyfills
00:17
Wrap Up
01:25
Useful Resources & Links
00:03
+ – Roundup
3 lectures 03:26
Roundup
02:58
Useful Resources & Links
00:07
Bonus: More Content!
00:20
Requirements
  • Basic JavaScript knowledge is required (base syntax, DOM basics, objects basics)
  • ES6+ JavaScript knowledge (classes etc) is a plus but not a must-have
Description

Let's face it: You got thousands of HTML tags to choose from but some really helpful ones (<tabs>, <side-drawer>, <modal>, ...) are missing.

What if you could build your own HTML tags? 

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
Featured review
Sean McBride
Sean McBride ( 52 courses, 11 reviews )
a year ago
This course is perfect for a web developer that is currently living in the React.js ecosystem that wants to be able to leverage existing skills in building production-ready native web components. The course shows everything you need to get started with Stencil, and it does a really great job introducing the native web component primitives and how the Stencil.js compiler maps the React component paradigms onto the web component standard. Great work!