How I Learned to Stop Worrying and Love Web Components

A talk on web components — the original problem (the web is global by default), a decade of workarounds, and the standard that finally absorbed their lessons. Structured in three acts à la Dr. Strangelove: The Worrying → A Decade of Coping → Learning to Love.

Files

File	What it is
index.html	The runnable reveal.js slide deck. This is what you present from.
slides.md	The same content as a plain-text outline with full speaker notes — for editing, printing, or importing into Keynote/Google Slides.
present.sh	One-command launcher: serves the deck locally and opens your browser.
vendor/	A local copy of reveal.js + theme + plugins + fonts. No internet required.
sandbox/	Standalone, runnable companion demos — the same Product Card built three ways (see Companion sandboxes).

Live online

The deck is hosted on GitHub Pages — share this link:

▶ https://nerfologist.github.io/web-components-presentation/

It's the real deck (not a screenshot): the live demos run, and S opens speaker notes. Any push to main re-deploys within a minute.

Running the presentation

./present.sh          # serves at http://localhost:8000 and opens your browser
./present.sh 9000     # optional: use a different port

Ctrl-C stops the server.

You can also just double-click index.html to view it — but use present.sh when presenting, so the speaker-notes window (below) works reliably. (A file:// origin often blocks that popup.)

Speaker notes view

With the deck open, press S. A second window opens showing:

• the current slide and a preview of the next slide,
• your speaker notes for each slide, and
• an elapsed + clock timer.

Put that window on your laptop screen and extend/mirror your display to the projector: the audience sees the slides, you see the notes. The two windows stay in sync — advance from either one.

Keyboard shortcuts

Key	Action
→ / Space	Next slide / fragment
←	Previous
S	Speaker notes window
F	Fullscreen
O	Slide overview (grid)
B	Black-out the screen
?	Show all shortcuts

The live demo (Act III)

The "watch CSS leak, then get contained" slide is a real, working demo — <plain-widget> and <shadow-widget> are actual custom elements running inside the slide. Click "☠️ Inject global .title { color:red }": the plain widget turns red while the Shadow DOM one is unaffected. Use the Reset button to re-run it cleanly for each audience. (The deck demonstrates its own thesis by existing.)

Companion sandboxes

The same interactive Product Card built three ways, so the trade-offs are side by side. Each is a self-contained static page (open the hosted link, or run it locally — no build step).

Version	What it shows	Live	Source
Native	Pure JS + DOM. Structure, style and behaviour scattered across three files; global CSS collisions (.title/.btn fights with the newsletter box).	open	sandbox/native/
Web Components	One <product-card> custom element with Shadow DOM: styles sealed, internals private, a slot="badge" for projected light DOM. Reactivity is still a manual render().	open	sandbox/web-component/
Lit	Same element, but reactive: setting this.qty re-renders automatically — the manual render() disappears. Same Shadow DOM encapsulation.	open	sandbox/lit/

The arc: the platform standardized encapsulation + lifecycle + composition — not reactivity, which is the gap a thin library (Lit) fills. Open all three and click around to feel the difference.

Prefer editing in the cloud? node sandbox/open-in-codesandbox.mjs sandbox/<version> mints a CodeSandbox from any of these folders and prints an editor + preview URL.

Offline / portability

Everything is self-contained under this folder — reveal.js, the theme, the highlight and notes plugins, and the fonts all live in vendor/. Copy the whole directory to any machine (or a USB stick) and it runs with zero network access.

Editing

• Quick text/structure edits: edit index.html directly (each slide is a <section>; speaker notes live in <aside class="notes">).
• Act labels in the top-left corner are assigned automatically by act-divider slides, so adding, removing, or reordering slides keeps the labels correct — no manual tagging.
• slides.md mirrors the deck content; keep the two in sync if you change one.

Credits

Built with reveal.js 5.1.0 (MIT). Theme: black. Font: Source Sans Pro.