Writing

Blog

Writing on system design, React, web performance, and the craft of building software.

1

What Are Web Components

Part 1•6 min read•Template, custom elements, shadow DOM, and ES modules: the four native browser APIs that let you define your own HTML elements without any framework.

Web Components Adoption

Part 2•5 min read•Web components reached all major browsers in 2020. Here is why adoption was slow, who built on them anyway, and where React compatibility stands today.

Drop In Web Components

Part 3•7 min read•How to drop existing web components into any project with five lines of HTML and no build step -- plus where to find them and what to reach for first.

2

Shadow Boundary

Part 1•5 min read•Why external CSS cannot reach inside a web component, what the shadow DOM boundary blocks, what little still passes through, and how to read the boundary in DevTools.

Styling From Outside

Part 2•4 min read•CSS custom properties, pre-defined themes, and ::part(): the three tools that let you style a web component from outside its shadow boundary.

Styling From Inside

Part 3•6 min read•The four CSS pseudo-selectors that only exist inside a shadow root: :host, :host-context(), ::slotted(), and :not(:defined) -- plus the adoptedStyleSheets API.

3

Writing Vanilla Web Components

Part 1•5 min read•The web component lifecycle in plain JavaScript, why vanilla authoring is more manual than frameworks, and the case for a lightweight library over rolling everything yourself.

Web Component Libraries

Part 2•7 min read•Lit, Hybrids, Stencil, and Haunted compared -- plus how Svelte, Vue, and Preact can export an existing component as a web component without a rewrite.

Lit In Practice

Part 3•4 min read•How to fetch data in connectedCallback, manage loading states, render lists with .map(), and update items in a Lit component without breaking reactivity.

4

State Management

Part 1•4 min read•How to share state between web components: Lit reactive controllers for reusable logic, the context protocol for tree-scoped state, and when to reach for a third-party library.

Real World Web Components

Part 2•5 min read•Accessibility challenges across the shadow boundary, Declarative Shadow DOM for SSR without JavaScript, SEO indexing behavior, and CSS custom property naming conventions.

Web Components | Writing & Engineering | Durgesh Rai