W3docs
pt
Entrar

Web Components & Stencil.js - Build Custom HTML Elements

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

Start 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!)

Course content

Section 1Introduction

  • Introduction
    1:38
  • Web Components - A Quick Demo
    6:30
  • What are Web Components
    3:22
  • Join our Online Learning Community
    1:00
  • Why Do We Use Web Components?
    3:05
  • Comparing Web Components & Frameworks
    6:15
  • Course Outline
    2:46
  • How To Get The Most Out Of The Course
    3:04

Section 2Refreshing Next Generation JavaScript (Optional)

  • Module IntroductionPremium
    1:12
  • Understanding "let" and "const"Premium
    3:05
  • Working with Arrow FunctionsPremium
    5:27
  • Exports and ImportsPremium
    4:43
  • Understanding ClassesPremium
    4:30
  • Classes, Properties and MethodsPremium
    3:03
  • The Spread & Rest OperatorPremium
    6:27
  • Refreshing Array FunctionsPremium
    2:32
  • Understanding Async CodePremium
    1:04
  • Next-Gen JavaScript - SummaryPremium
    1:00
  • JS Array FunctionsPremium
    1:00

Section 3Understanding the Basics

  • Module Introduction - What are Web Components?Premium
    5:07
  • Browser SupportPremium
    3:05
  • Our Development SetupPremium
    4:38
  • Creating our First Custom ElementPremium
    8:28
  • Interacting with the Surrounding DOMPremium
    5:04
  • Understanding the Custom Elements LifecyclePremium
    2:51
  • Using "connectedcallback" for DOM AccessPremium
    2:05
  • Listening to Events Inside the ComponentPremium
    8:52
  • Using Attributes on Custom ElementsPremium
    4:45
  • "Attributes" vs "Properties"Premium
    1:00
  • Styling our ElementsPremium
    4:08
  • Using the Shadow DOMPremium
    5:00
  • Adding an HTML TemplatePremium
    5:40
  • Using SlotsPremium
    1:50
  • Defining the Template in JavaScriptPremium
    3:29
  • Using Style Tags in the Shadow DOMPremium
    2:40
  • Extending Built-In ElementsPremium
    7:33
  • Time to Practice: The Basics - ProblemPremium
    2:55
  • Time to Practice: The Basics - SolutionPremium
    11:31
  • DebuggingPremium
    1:00
  • Wrap UpPremium
    2:30
  • Useful Resources & LinksPremium
    1:00

Section 4Diving Deeper Into Web Components

  • Module IntroductionPremium
    0:51
  • Understanding Shadow DOM ProjectionPremium
    2:26
  • Styling "slot" Content Outside of the Shadow DOMPremium
    3:44
  • Styling "slot" Content Inside the Shadow DOMPremium
    3:10
  • Styling the Host ComponentPremium
    4:42
  • Styling Components from OutsidePremium
    1:00
  • Conditional Host StylingPremium
    2:49
  • Styling with the Host Content in MindPremium
    2:27
  • Smart Dynamic Styling with CSS VariablesPremium
    6:20
  • Cleaning Up Our Overall StylingPremium
    3:22
  • Observing Attribute ChangesPremium
    6:17
  • Adjusting the Component Behaviour Upon Attribute ChangesPremium
    2:34
  • Using "disconnectedcallback"Premium
    4:40
  • Adding a Render MethodPremium
    6:13
  • Wrap UpPremium
    2:33
  • Useful Resources & LinksPremium
    1:00

Section 5Building More Complex Components

  • Module IntroductionPremium
    0:52
  • Creating the Basics Modal ComponentPremium
    6:33
  • Adding the Modal ContainerPremium
    2:29
  • Styling the Modal ElementsPremium
    5:35
  • Adding Some General App LogicPremium
    3:49
  • Opening the Modal via CSSPremium
    5:23
  • Public Methods & PropertiesPremium
    6:37
  • Understanding Named SlotsPremium
    5:45
  • "slotchange" & Getting Access to Slot ContentPremium
    5:10
  • Closing the Modal with Modal ButtonsPremium
    7:01
  • Dispatching Custom EventsPremium
    3:40
  • Configuring Custom EventsPremium
    4:52
  • Adding Enhancements & Modal AnimationsPremium
    4:50
  • Wrap UpPremium
    1:48
  • Useful Resources & LinksPremium
    1:00

Section 6Stencil - An Introduction

  • Module IntroductionPremium
    1:21
  • Using Web Components in Modern BrowsersPremium
    2:35
  • Browser Support for Web ComponentsPremium
    2:27
  • Using Web Components in All BrowsersPremium
    1:00
  • Creating a Stencil ProjectPremium
    2:59
  • What is Stencil?Premium
    3:09
  • Stencil.js behind the ScenesPremium
    1:00
  • Diving Into a First Stencil ComponentPremium
    6:56
  • Wrap UpPremium
    1:41

Section 7Stencil - Diving Into the Basics

  • Module IntroductionPremium
    0:35
  • Using the Development ServerPremium
    3:19
  • MUST READ: Ensuring Correct ImportsPremium
    1:00
  • Creating a New Stencil Web ComponentPremium
    8:55
  • Styling a Stencil ComponentPremium
    5:40
  • Using PropsPremium
    7:02
  • Important: Reflect Props to AttributesPremium
    1:00
  • Configuring PropsPremium
    1:27
  • Using Slots & StylingPremium
    4:54
  • Rendering Conditional ContentPremium
    2:08
  • Using Attributes for Styling onlyPremium
    3:27
  • Using Props in Combination with AttributesPremium
    4:16
  • Understanding Mutable PropsPremium
    5:33
  • Preparing TabsPremium
    3:33
  • Adding More Event ListenersPremium
    4:23
  • Using StatePremium
    4:32
  • Adding Methods to ComponentsPremium
    3:40
  • Adding a BackdropPremium
    5:20
  • Time to Practice: Stencil - ProblemPremium
    1:13
  • Time to Practice: Stencil - SolutionPremium
    10:04
  • Wrap UpPremium
    1:52
  • Useful Resources & LinksPremium
    1:00

Section 8Advanced Stencil

  • Module IntrodutionPremium
    0:38
  • Creating a New ComponentPremium
    2:48
  • Component & API PreparationsPremium
    3:57
  • Submitting FormsPremium
    2:09
  • Styling the ComponentPremium
    5:49
  • HTTP Requests in ComponentsPremium
    7:43
  • Using the API KeyPremium
    2:23
  • Accessing the Host ElementPremium
    5:14
  • Using ReferencesPremium
    2:52
  • Two Way Binding & Input ValidationPremium
    6:32
  • Error HandlingPremium
    6:07
  • Using the "componentdidload" Lifecycle HookPremium
    5:34
  • All Lifecycle HooksPremium
    5:16
  • Using Update Lifecycle HooksPremium
    4:41
  • Watching Prop ChangesPremium
    4:47
  • Creating a New ComponentPremium
    5:56
  • Styling the New ComponentPremium
    1:11
  • Outputting a List of ElementsPremium
    6:20
  • Styling the List ItemsPremium
    2:11
  • Emitting Customs EventsPremium
    4:47
  • Using the Listen DecoratorPremium
    6:05
  • Using HostdataPremium
    4:37
  • Adding a Loading SpinnerPremium
    3:53
  • Embedding Components Into ComponentsPremium
    4:54
  • Using CSS PropertiesPremium
    4:32
  • Using Stencil.js to Build Entire AppsPremium
    1:00
  • Wrap UpPremium
    1:25
  • Useful Resources & LinksPremium
    1:00

Section 9Deployment & Publishing

  • Module IntroductionPremium
    0:54
  • Using Stencil ConfigPremium
    4:59
  • Building & Using the ComponentsPremium
    4:15
  • Using Web Components in a Node.js ProjectPremium
    2:10
  • Publishing to NPMPremium
    3:24
  • Installing NPM PackagesPremium
    1:27
  • Using Web Components in an Angular AppPremium
    5:32
  • Using Web Components in a React AppPremium
    5:18
  • Using Web Components in a Vue AppPremium
    4:31
  • Polyfills & The Internet ExplorerPremium
    2:49
  • IE & PolyfillsPremium
    1:00
  • Wrap UpPremium
    1:25
  • Useful Resources & LinksPremium
    1:00

Section 10Roundup

  • RoundupPremium
    2:58
  • Useful Resources & LinksPremium
    1:00

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

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 1,000,000 students worldwide as well as a successful YouTube channel 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.