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?
Prerequisites
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.
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,335+ 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