Web Components
The browser's own way to define a reusable element — custom tags, a shadow tree that keeps styles from leaking, and a template to stamp out.
The appeal is outliving the framework. A custom element is defined against the platform, so it keeps working when the app around it is rewritten, and it can be dropped into a page that uses no framework at all — which is why design systems shared across several teams tend to end up here.
The shadow tree is the sharp edge. It isolates styles in both directions, so the page cannot reach in to restyle a component and the component cannot inherit what the page assumed it would; what crosses the boundary crosses through parts and custom properties that were deliberately exposed.
Accessibility is not free either. A custom tag carries no meaning on its own, so the roles, the labels, and the keyboard behaviour that a native button has by birth all have to be written by hand.