Intro & Custom Elements

Web Components are a suite of browser-native standards that let you define your own HTML elements — reusable, encapsulated, and framework-agnostic. No build step, no library, just the platform.

This course walks you through three interlocking pillars:

flowchart LR
  CE["Custom Elements
(class + define)"]
  SD["Shadow DOM
(encapsulated tree)"]
  TS["Templates & Slots
(declarative markup)"]
  CE --> SD
  SD --> TS
  CE --> TS

The three pillars of Web Components

Pillar	What it gives you
Custom Elements	A class-based API to create new HTML tags
Shadow DOM	A private, encapsulated DOM tree and CSS scope
Templates & Slots	Reusable HTML fragments with named insertion points

By the end of this module you will have defined your first custom element from scratch, and seen how Lit builds on the same primitives.

Your first custom element

The snippet below defines <hello-badge> — a vanilla custom element that reads a name attribute and renders a greeting.

HTMLJS

<hello-badge name="Web Components"></hello-badge>

Lit teaser

Lit is a thin library that adds reactive properties and a declarative template system on top of the standard Custom Elements and Shadow DOM APIs. It is covered in depth in the Lit and Tooling module — here is a quick taste to confirm the import path works in this runner:

HTMLJS

<lit-hi></lit-hi>

🧩 Framework-agnostic by design

Web Components are built into the browser. A hello-badge element works inside a React app, a Svelte app, or a plain HTML file — because all of them ultimately render HTML.

Which browser API lets you register a new HTML tag name?

document.createElement() customElements.define() HTMLElement.register() window.defineElement()

What are the three pillars of Web Components?

Custom Elements, Virtual DOM, and JSX Custom Elements, Shadow DOM, and Templates & Slots Shadow DOM, Service Workers, and IndexedDB Custom Elements, CSS Modules, and Web Workers

Lit is built on top of which browser-native standards?

React internals and Babel transforms Service Workers and IndexedDB Custom Elements and Shadow DOM WebAssembly and WASI

Submit

Mark as complete