Curious web builders
You want to create your own custom HTML tags and stop re-creating the same UI patterns in every project. This course gives you a clear path to doing that with browser-native tech.
Web Components & Stencil.js - Build Custom HTML Elements
A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS
Course Overview
About This Course
You’ve built plenty of UIs with the HTML tags the browser gives you—and you’ve also hit the moment where you wish <tabs>, a <side-drawer>, or a <modal> just existed. Copy-pasting markup and JavaScript between projects gets old fast, and frameworks aren’t always the answer.
In this course, you’ll use Web Components (native custom HTML elements) to create re-usable building blocks with just HTML, CSS, and JavaScript. You’ll start with what the browser already supports, then use Stencil.js to make more complex components easier to build with a modern workflow.
By the end, you’ll be able to ship your own lightweight custom elements, style them safely, pass data in and out, and wire them into real apps—whether you’re using Angular, React, Vue, or no framework at all.
What You'll Learn
You’ll go from native browser Web Components to a Stencil.js workflow that helps you build and share custom elements across projects and frameworks.
Create custom elements
Build re-usable, lightweight custom HTML elements using native browser features, so you can package UI behavior into tags you can drop into any project.
Build complex UI components
Implement components of different complexity levels—from a simple tooltip up to UI patterns like modals and side drawers—without relying on Angular, React, or Vue.
Pass data into components
Feed data into your web components and use it internally, so your custom elements can be configured and re-used with different inputs across pages and apps.
Emit custom events
Create and dispatch your own events from inside a component, then listen to them in JavaScript to react to user interactions and component state changes.
Scope styles with Shadow DOM
Use the Shadow DOM to keep CSS styles encapsulated within your custom elements, preventing style leakage and avoiding conflicts with the rest of the page.
Work efficiently with Stencil.js
Use Stencil.js features to streamline development of native web components, including a workflow that leverages TypeScript and JSX (taught in the course).
Ready to get started?
See enrollment optionsPrerequisites
Basic JavaScript knowledge (base syntax, DOM basics, object basics).
ES6+ JavaScript (e.g.
const,let, classes) is recommended but not required; a brief refresher is included.No prior Angular/React/Vue, TypeScript, or JSX knowledge is required.
Who Is This Course For?
Framework-agnostic developers
You work across different stacks (or switch often) and need UI pieces you can re-use anywhere. Web Components let you share the same elements across Angular, React, Vue, or plain JavaScript apps.
Future-focused students
You’re looking for a future-proof web technology that’s built into the browser and fits into any web app. You want something practical you can apply immediately without needing deep framework expertise.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Introduction26m
- 01Introduction1:38 min
- 02Web Components - A Quick Demo6:30 min
- 03What are Web Components3:22 min
- 04Join our Online Learning Community0:00 min
- 05Why Do We Use Web Components?3:05 min
- 06Comparing Web Components & Frameworks6:15 min
- 07Course Outline2:46 min
- 08How To Get The Most Out Of The Course3:04 min
- 09The Academind Pro Referral Program0:00 min
Refreshing Next Generation JavaScript (Optional)34m
- 01Module Introduction1:12 min
- 02Understanding "let" and "const"3:05 min
- 03Working with Arrow Functions5:27 min
- 04Exports and Imports4:43 min
- 05Understanding Classes4:30 min
- 06Classes, Properties and Methods3:03 min
- 07The Spread & Rest Operator6:27 min
- 08Refreshing Array Functions2:32 min
- 09JS Array Functions2:32 min
- 10Understanding Async Code1:04 min
- 11Next-Gen JavaScript - Summary0:00 min
Understanding the Basics1h 32m
- 01Module Introduction - What are Web Components?5:07 min
- 02Browser Support3:05 min
- 03Our Development Setup4:38 min
- 04Creating our First Custom Element8:28 min
- 05Interacting with the Surrounding DOM5:04 min
- 06Understanding the Custom Elements Lifecycle2:51 min
- 07Using "connectedcallback" for DOM Access2:05 min
- 08Listening to Events Inside the Component8:52 min
- 09Using Attributes on Custom Elements4:45 min
- 10"Attributes" vs "Properties"0:00 min
- 11Styling our Elements4:08 min
- 12Using the Shadow DOM5:00 min
- 13Adding an HTML Template5:40 min
- 14Using Slots1:50 min
- 15Defining the Template in JavaScript3:29 min
- 16Using Style Tags in the Shadow DOM2:40 min
- 17Extending Built-In Elements7:33 min
- 18Time to Practice: The Basics - Problem2:55 min
- 19Time to Practice: The Basics - Solution11:31 min
- 20Debugging0:00 min
- 21Wrap Up2:30 min
- 22Useful Resources & Links0:00 min
Diving Deeper Into Web Components52m
- 01Module Introduction0:51 min
- 02Understanding Shadow DOM Projection2:26 min
- 03Styling "slot" Content Outside of the Shadow DOM3:44 min
- 04Styling "slot" Content Inside the Shadow DOM3:10 min
- 05Styling the Host Component4:42 min
- 06Styling Components from Outside0:00 min
- 07Conditional Host Styling2:49 min
- 08Styling with the Host Content in Mind2:27 min
- 09Smart Dynamic Styling with CSS Variables6:20 min
- 10Cleaning Up Our Overall Styling3:22 min
- 11Observing Attribute Changes6:17 min
- 12Adjusting the Component Behaviour Upon Attribute Changes2:34 min
- 13Using "disconnectedcallback"4:40 min
- 14Adding a Render Method6:13 min
- 15Wrap Up2:33 min
- 16Useful Resources & Links0:00 min
Building More Complex Components1h 4m
- 01Module Introduction0:52 min
- 02Creating the Basics Modal Component6:33 min
- 03Adding the Modal Container2:29 min
- 04Styling the Modal Elements5:35 min
- 05Adding Some General App Logic3:49 min
- 06Opening the Modal via CSS5:23 min
- 07Public Methods & Properties6:37 min
- 08Understanding Named Slots5:45 min
- 09"slotchange" & Getting Access to Slot Content5:10 min
- 10Closing the Modal with Modal Buttons7:01 min
- 11Dispatching Custom Events3:40 min
- 12Configuring Custom Events4:52 min
- 13Adding Enhancements & Modal Animations4:50 min
- 14Wrap Up1:48 min
- 15Useful Resources & Links0:00 min
Stencil - An Introduction21m
- 01Module Introduction1:21 min
- 02Using Web Components in Modern Browsers2:35 min
- 03Browser Support for Web Components2:27 min
- 04Using Web Components in All Browsers0:00 min
- 05Creating a Stencil Project2:59 min
- 06What is Stencil?3:09 min
- 07Stencil.js behind the Scenes0:00 min
- 08Diving Into a First Stencil Component6:56 min
- 09Wrap Up1:41 min
Stencil - Diving Into the Basics1h 21m
- 01Module Introduction0:35 min
- 02Using the Development Server3:19 min
- 03MUST READ: Ensuring Correct Imports0:00 min
- 04Creating a New Stencil Web Component8:55 min
- 05Styling a Stencil Component5:40 min
- 06Using Props7:02 min
- 07Important: Reflect Props to Attributes0:00 min
- 08Configuring Props1:27 min
- 09Using Slots & Styling4:54 min
- 10Rendering Conditional Content2:08 min
- 11Using Attributes for Styling only3:27 min
- 12Using Props in Combination with Attributes4:16 min
- 13Understanding Mutable Props5:33 min
- 14Preparing Tabs3:33 min
- 15Adding More Event Listeners4:23 min
- 16Using State4:32 min
- 17Adding Methods to Components3:40 min
- 18Adding a Backdrop5:20 min
- 19Time to Practice: Stencil - Problem1:13 min
- 20Time to Practice: Stencil - Solution10:04 min
- 21Wrap Up1:52 min
- 22Useful Resources & Links0:00 min
Advanced Stencil1h 52m
- 01Module Introdution0:38 min
- 02Creating a New Component2:48 min
- 03Component & API Preparations3:57 min
- 04Submitting Forms2:09 min
- 05Styling the Component5:49 min
- 06HTTP Requests in Components7:43 min
- 07Using the API Key2:23 min
- 08Accessing the Host Element5:14 min
- 09Using References2:52 min
- 10Two Way Binding & Input Validation6:32 min
- 11Error Handling6:07 min
- 12Using the "componentdidload" Lifecycle Hook5:34 min
- 13All Lifecycle Hooks5:16 min
- 14Using Update Lifecycle Hooks4:41 min
- 15Watching Prop Changes4:47 min
- 16Creating a New Component5:56 min
- 17Styling the New Component1:11 min
- 18Outputting a List of Elements6:20 min
- 19Styling the List Items2:11 min
- 20Emitting Customs Events4:47 min
- 21Using the Listen Decorator6:05 min
- 22Using Hostdata4:37 min
- 23Adding a Loading Spinner3:53 min
- 24Embedding Components Into Components4:54 min
- 25Using CSS Properties4:32 min
- 26Using Stencil.js to Build Entire Apps0:00 min
- 27Wrap Up1:25 min
- 28Useful Resources & Links0:00 min
And 2 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Web Components & Stencil.js - Build Custom HTML Elements
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime