Web Components and the Shadow DOM

The Framework Fatigue

You wrote a gorgeous date-picker component in AngularJS in 2014. In 2018, you had to rewrite it in React. In 2024, you rewrote it in Svelte. Web Components solve this. They are native browser APIs that allow you to create custom, reusable HTML tags (like <custom-date-picker>) that work identically in every framework, and without any framework at all.

The Shadow DOM

The magic behind Web Components is the Shadow DOM. When you attach a shadow root to your custom element, you create a private, encapsulated DOM tree. The CSS you write inside the Shadow DOM cannot leak out and ruin the rest of the webpage, and the global webpage CSS cannot leak in and ruin your component. It provides true CSS scoping natively in the browser.

HTML Templates and Custom Elements

By extending the native HTMLElement JavaScript class, you can define lifecycle methods (connectedCallback) exactly like React. While raw Web Components require a bit of boilerplate, lightweight wrappers like Google's Lit make building them incredibly fast, ensuring your UI library will literally last forever.