Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Web Components & Stencil.js - Build Custom HTML Elements

Name: Web Components & Stencil.js - Build Custom HTML Elements
Rating: 4.9 (3929 reviews)

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS

Bestseller

Highest Rated

Created byAcademind by Maximilian Schwarzmüller, Maximilian Schwarzmüller

Last updated 11/2023

English

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

10 sections • 144 lectures • 8h 48m total length

Introduction1:38
Welcome to the course! Let me introduce myself and give you a rough overview of this course, in this lecture.
Web Components - A Quick Demo6:30
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.
What are Web Components3:22
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.
Join our Online Learning Community0: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!
Why Do We Use Web Components?3:05
We know what Web Components and Custom HTML Elements are - why would we use them? In this lecture, I'll give you some ideas!
Comparing Web Components & Frameworks6:15
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!
Course Outline2:46
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.
How To Get The Most Out Of The Course3:04
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.

Module Introduction1:12
Understanding "let" and "const"3:05
Working with Arrow Functions5:27
Exports and Imports4:43
Understanding Classes4:30
Classes, Properties and Methods3:03
The Spread & Rest Operator6:27
Refreshing Array Functions2:32
Understanding Async Code1:04
Next-Gen JavaScript - Summary3:38
Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.
JS Array Functions0:14
Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

Module Introduction - What are Web Components?5:07
Browser Support3:05
Our Development Setup4:38
Creating our First Custom Element8:29
Interacting with the Surrounding DOM5:04
Understanding the Custom Elements Lifecycle2:51
Using "connectedcallback" for DOM Access2:05
Listening to Events Inside the Component8:52
Using Attributes on Custom Elements4:45
"Attributes" vs "Properties"1:00
Styling our Elements4:08
Using the Shadow DOM5:00
Adding an HTML Template5:40
Using Slots1:50
Defining the Template in JavaScript3:29
Using Style Tags in the Shadow DOM2:40
Extending Built-In Elements7:33
Time to Practice - The Basics
Debugging0:14
Wrap Up2:30
Useful Resources & Links0:04

Module Introduction0:51
Understanding Shadow DOM Projection2:26
Styling "slot" Content Outside of the Shadow DOM3:44
Styling "slot" Content Inside the Shadow DOM3:10
Styling the Host Component4:42
Styling Components from Outside0:16
Conditional Host Styling2:49
Styling with the Host Content in Mind2:27
Smart Dynamic Styling with CSS Variables6:20
Cleaning Up Our Overall Styling3:22
Observing Attribute Changes6:17
Adjusting the Component Behaviour Upon Attribute Changes2:34
Using "disconnectedcallback"4:40
Adding a Render Method6:13
Wrap Up2:33
Useful Resources & Links0:06

Module Introduction0:52
Creating the Basics Modal Component6:33
Adding the Modal Container2:29
Styling the Modal Elements5:35
Adding Some General App Logic3:49
Opening the Modal via CSS5:23
Public Methods & Properties6:37
Understanding Named Slots5:45
"slotchange" & Getting Access to Slot Content5:10
Closing the Modal with Modal Buttons7:01
Dispatching Custom Events3:40
Configuring Custom Events4:52
Adding Enhancements & Modal Animations4:51
Wrap Up1:48
Useful Resources & Links0:01

Module Introduction0:35
Using the Development Server3:19
MUST READ: Ensuring Correct Imports0:07
Creating a New Stencil Web Component8:55
Styling a Stencil Component5:40
Using Props7:02
Important: Reflect Props to Attributes0:09
Configuring Props1:27
Using Slots & Styling4:54
Rendering Conditional Content2:08
Using Attributes for Styling only3:27
Using Props in Combination with Attributes4:16
Understanding Mutable Props5:33
Preparing Tabs3:33
Adding More Event Listeners4:23
Using State4:32
Adding Methods to Components3:40
Adding a Backdrop5:20
Time to Practice - Stencil
Wrap Up1:52
Useful Resources & Links0:03

Module Introdution0:38
Creating a New Component2:48
Component & API Preparations3:57
Submitting Forms2:09
Styling the Component5:49
HTTP Requests in Components7:43
Using the API Key2:23
Accessing the Host Element5:14
Using References2:52
Two Way Binding & Input Validation6:32
Error Handling6:07
Using the "componentdidload" Lifecycle Hook5:34
All Lifecycle Hooks5:16
Using Update Lifecycle Hooks4:41
Watching Prop Changes4:47
Creating a New Component5:56
Styling the New Component1:11
Outputting a List of Elements6:20
Styling the List Items2:11
Emitting Customs Events4:47
Important: The Listen Decorator0:09
Using the Listen Decorator6:05
Using Hostdata4:37
Adding a Loading Spinner3:53
Embedding Components Into Components4:54
Using CSS Properties4:32
Using Stencil.js to Build Entire Apps0:22
Wrap Up1:25
Useful Resources & Links0:03

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

Web Components & Stencil.js - Build Custom HTML Elements

What you'll learn

Explore related topics

Course content

Introduction8 lectures • 27min

Refreshing Next Generation JavaScript (Optional)11 lectures • 36min

Understanding the Basics20 lectures • 1hr 19min

Diving Deeper Into Web Components16 lectures • 53min

Building More Complex Components15 lectures • 1hr 4min

Stencil - An Introduction9 lectures • 22min

Stencil - Diving Into the Basics20 lectures • 1hr 11min

Advanced Stencil29 lectures • 1hr 53min

Deployment & Publishing13 lectures • 37min

Roundup3 lectures • 1min

Requirements

Description

Who this course is for: