Web-Components

Svelte 5 replaces the old let plus $: reactivity model with runes, a small set of compiler-recognized functions that look like normal JavaScript but get rewritten into fine-grained reactive code. Instead of declaring let count = 0 and hoping the compiler infers a reactive binding, you write let count = $state(0). Instead of $: doubled = count * 2, you write let doubled = $derived(count * 2). Instead of $: console.log(count), you reach for $effect(() => console.log(count)). Props become let { name } = $props().

The short answer: build an interactive data table with semantic HTML (<table>, <thead>, <th scope="col">), add ARIA attributes (aria-sort, aria-live, aria-controls), and wire up keyboard handlers that enable sorting, filtering, and cell-by-cell navigation without a mouse. Done right, the result satisfies WCAG 2.2 Level AA, works for sighted users, screen reader users, and keyboard-only users, and needs no framework dependencies .

This guide walks through the markup, the ARIA attributes, the JavaScript event handlers, and the performance trade-offs you hit once your dataset gets large. The reference patterns come from the WAI-ARIA Authoring Practices Guide sortable table example and the grid pattern .

You can build a fully working Markdown editor with synchronized live preview using a <textarea> for input, the marked library for parsing, and a debounced input event listener that re-renders on every keystroke. The whole thing fits in under 100 lines of vanilla JavaScript and CSS, with no build tools , no framework, and no npm install. One index.html file, one CDN script tag, double-click to open in a browser, and you are writing Markdown with a rendered preview next to your cursor.

CSS subgrid lets a nested grid inherit its parent’s track sizes. Child elements inside nested components line up with the parent layout. No flat HTML, no JavaScript height math, no hardcoded min-heights. It shipped in every major browser by late 2023, sits at about 92% global usage, and is safe on any modern web project today.

Ever fought a card grid where the buttons won’t line up because one card has a longer description? Subgrid is the fix you’ve been waiting for.

Web Components are native browser APIs: Custom Elements, Shadow DOM, and HTML Templates. They let you build reusable UI parts like <modal-dialog> or <accordion-panel> that work in React, Vue, Svelte, Angular, or plain HTML. No build tools, no framework lock-in. With 98% browser support in 2026, they’re the most portable component format around. Write it once, ship it anywhere.

The Three APIs That Make Up Web Components

Web Components is an umbrella term for three browser APIs that work together. You can use each one on its own. Custom Elements without Shadow DOM, Shadow DOM without Templates. But the combination is where they shine.