Web Components & Stencil.js - Build Custom HTML Elements
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Enroll in Course
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!)
9+
hours
140+
lessons
Course Curriculum
-
PreviewIntroduction (1:38)
-
PreviewWeb Components - A Quick Demo (6:30)
-
PreviewWhat are Web Components (3:22)
-
PreviewJoin our Online Learning Community
-
PreviewWhy Do We Use Web Components? (3:05)
-
PreviewComparing Web Components & Frameworks (6:15)
-
PreviewCourse Outline (2:46)
-
PreviewHow To Get The Most Out Of The Course (3:04)
-
StartThe Academind Pro Referral Program
-
StartModule Introduction (1:12)
-
StartUnderstanding "let" and "const" (3:05)
-
StartWorking with Arrow Functions (5:27)
-
StartExports and Imports (4:43)
-
StartUnderstanding Classes (4:30)
-
StartClasses, Properties and Methods (3:03)
-
StartThe Spread & Rest Operator (6:27)
-
StartRefreshing Array Functions (2:32)
-
StartJS Array Functions (2:32)
-
StartUnderstanding Async Code (1:04)
-
StartNext-Gen JavaScript - Summary
-
StartModule Introduction - What are Web Components? (5:07)
-
StartBrowser Support (3:05)
-
StartOur Development Setup (4:38)
-
StartCreating our First Custom Element (8:28)
-
StartInteracting with the Surrounding DOM (5:04)
-
StartUnderstanding the Custom Elements Lifecycle (2:51)
-
StartUsing "connectedcallback" for DOM Access (2:05)
-
StartListening to Events Inside the Component (8:52)
-
StartUsing Attributes on Custom Elements (4:45)
-
Start"Attributes" vs "Properties"
-
StartStyling our Elements (4:08)
-
StartUsing the Shadow DOM (5:00)
-
StartAdding an HTML Template (5:40)
-
StartUsing Slots (1:50)
-
StartDefining the Template in JavaScript (3:29)
-
StartUsing Style Tags in the Shadow DOM (2:40)
-
StartExtending Built-In Elements (7:33)
-
StartTime to Practice: The Basics - Problem (2:55)
-
StartTime to Practice: The Basics - Solution (11:31)
-
StartDebugging
-
StartWrap Up (2:30)
-
StartUseful Resources & Links
Course Prerequisites
Basic JavaScript knowledge is required (base syntax, DOM basics, objects basics)
ES6+ JavaScript knowledge (classes etc) is a plus but not a must-have
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Don't take my word for it - here's what other students are saying.
Craig West
Excellent! Done many of Max's courses and they are very thorough and well explained. This course brings Web Components to life an opens up many possiiblities.
Marian Victor Bușoi
Another perfectly arranged course from Max. Thank you, this was super useful and very well done! :)
Yevgeniy Fliegel
This is a great course for everyone. Really, it doesn't matter, if you're just learning Html, CSS and Javascript or want to build really cool and advanced things with it. Considering the fact, that Max always keeps his courses up to date with new libraries and language versions, this is a really good buy.
30 Day Money Back Guarantee - No Questions Asked!
Our courses helped thousands of students learn something new and improve their lives.
We're so convinced by our course quality that we guarantee your success and provide a full refund within the first 30 days if you're not happy with the course.
Your Instructor
As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 2,500,000 students worldwide as well as a successful YouTube channel with 900.000 subscribers is the best proof for that.
The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content.
That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.
Frequently Asked Questions
Join 9923 happy students!
Single-Course License
Full access to "Web Components & Stencil.js - Build Custom HTML Elements"
$69
Access to this course only.
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!