Web-Components

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.