Best of Web Components — April 2026

1. 1
   Article

   MDN Blog·7w

   Under the hood of MDN's new frontend

   MDN rebuilt its frontend from a React SPA (called 'yari') to a web components-based architecture using Lit, eliminating technical debt accumulated from ejected Create React App configs, entangled CSS, and the fundamental mismatch between a React wrapper and static documentation content. The new stack uses Lit web components for islands of interactivity, custom server components for static HTML templating, and Rspack (a Rust-based Webpack-compatible bundler) for builds. Key architectural wins include lazy-loading web components by name convention, shipping only the CSS needed per page, progressive enhancement via Declarative Shadow DOM, and a development environment that starts in 2 seconds instead of 2 minutes. The Baseline project guided browser compatibility decisions throughout.

   104
2. 2
   Article

   Vaadin·8w

   CSS Performance Optimizations for Grid

   Vaadin's engineering team shares three CSS optimizations made for Grid and Tree Grid in Vaadin 25 to address severe rendering slowdowns with the new Aura theme. The key fixes were: replacing CSS box shadows (computed via custom properties) with regular borders, cutting rendering time by ~50%; switching from CSS part attribute selectors to class selectors, reducing selector match attempts by 3.5x and improving scrolling frame time from 90ms to 40ms; and registering CSS custom properties that use light-dark() with explicit <color> syntax via the Houdini @property API, reducing Aura rendering time by ~60%. Together these brought a 180-column grid's initial render from ~7.2s down to ~1s.

   55

   2
3. 3
   Article

   Frontend Focus·6w

   Frontend Focus Issue 737: April 15, 2026

   Frontend Focus Issue 737 covers Google's new spam policy penalizing back button hijacking starting June, MDN's architectural rebuild replacing React with web components, and Addy Osmani's intro to Agentic Engine Optimization (AEO). Also featured: applying Disney animation squash-and-stretch principles to web motion, a critique of AI-generated frontend design, CSS-only state machines using :has(), container query typography systems, Unicode variation selectors and the font-variant-emoji property, and a browser tool for visually exploring Unicode characters.

   10