← All categories

Web Components

The browser-native component model: Custom Elements, Shadow DOM, HTML Templates, slots, lifecycle callbacks, form integration, accessibility, Lit 3.x, and SSR with Declarative Shadow DOM.

Web Components

What are Web Components?

Defining a custom element

Lifecycle callbacks

Shadow DOM basics

open vs closed shadow mode

HTML Templates

Named slots and fallback content

Attribute vs property

Styling with CSS custom properties

::slotted and ::part pseudo-elements

Form-associated custom elements

Web components vs framework components

Lit basics

Lit reactive properties

ARIA and accessibility in Shadow DOM

Event retargeting across shadow boundaries

Declarative Shadow DOM and SSR

ElementInternals deep dive

Custom element upgrade timing and FOUC

Lit reactive controllers and directives

Consuming web components in frameworks

Performance: web components at scale