Custom Components

Build reusable, encapsulated HTML elements with custom tags and logic: a framework-agnostic, browser-native standard for component development.

Custom Components (formally, Web Components) are a suite of four native browser APIs that enable developers to create new, reusable HTML tags (e.g., `<data-chart>`). The core is the **Custom Elements** specification, which defines the new tag and its lifecycle. **Shadow DOM** provides critical style and markup encapsulation, ensuring component-specific CSS (like `button:hover`) does not conflict with the global document. Finally, **HTML Templates** (`<template>` and `<slot>`) allow for inert, reusable markup structures, all imported via **ES Modules**. This standardized approach delivers highly portable components that work across all modern browsers (Chrome, Firefox, Safari, Edge) and integrate seamlessly with any major JavaScript framework.

https://developer.mozilla.org/en-US/docs/Web/Web_Components