CSS container queries (@container) style components based on the width of their parent container instead of the browser viewport. Add container-type: inline-size to a parent element, write @container (min-width: 400px) { ... } rules on the children, and those children automatically adapt their layout based on the space available to them - not the screen size. All major browsers have supported container queries since early 2023 (Chrome 105+, Firefox 110+, Safari 16+), and as of 2026 they sit at over 96% global support according to Can I Use .

To pass all three Core Web Vitals, target an LCP under 2.5 seconds by preloading your hero image and cutting server response time, a CLS under 0.1 by reserving explicit dimensions for all media, and an INP under 200ms by breaking long JavaScript tasks into smaller chunks. Diagnose all three using Chrome DevTools, Lighthouse, and the CrUX Dashboard for real-user field data.

Why Core Web Vitals Matter for SEO and User Experience

Google formally incorporated Core Web Vitals into its ranking algorithm in 2021, but their weight has grown since then. With the March 2026 core update, Google introduced holistic CWV scoring - performance data aggregated across your entire domain rather than judged page by page. If 30% of your indexed pages fail LCP thresholds, that drags down the site-wide score even if your homepage is fast.

Web Components are native browser APIs - Custom Elements, Shadow DOM, and HTML Templates - that let you create reusable, encapsulated UI elements like <modal-dialog> or <accordion-panel> that work in React, Vue, Svelte, Angular, or plain HTML without build tools or framework dependencies. With 98% browser support across all modern browsers in 2026, they are the most portable component format available: write it once, ship it anywhere.

The Three APIs That Make Up Web Components

Web Components is an umbrella term for three distinct browser APIs that work together. You can use each independently - Custom Elements without Shadow DOM, Shadow DOM without Templates - but the combination is where they become genuinely useful.